jquery - Jquery悬停在问题中

Question

为什么这不起作用？说明：我有一个容器（带有 .hover 的 div）。悬停时，.thumbtxt2 应该从左侧滑入，它确实如此，但仅在第一次。之后，它从右侧滑入。

var $j = jQuery.noConflict();

$j(document).ready(function () {
    $j(".hover").hover(function () {
        $j(this).find('.thumbtxt2').css("left", "-220");
        if ($j(window).width() > 1050) {
            $j(this).find('.thumbimg').stop().animate({
                opacity: .0
            }, 200);

            $j(this).find('.thumbtxt2').stop().animate({
                left: 0
            }, 200);
        } else {
            $j(this).find('.thumbimg').stop().animate({
                opacity: .5
            }, 200);
        };
    },
    function () {
        if ($j(window).width() > 1050) {
            $j(this).find('.thumbimg').stop().animate({
                opacity: 1
            }, 200);
            $j(this).find('.thumbtxt2').stop().animate({
                left: 220
            }, 200, function () {
                $j(this).find('.thumbtxt2').css("left", "-220");
            });
        } else {
            $j(this).find('.thumbimg').stop().animate({
                opacity: 1
            }, 200);
        };
    });
});

谢谢！

Answer 1

由于某种原因， t2 = $(this).find('.thumbtxt2').css("left", "-220");不起作用。使用 .animate()t2 = $(this).find('.thumbtxt2').animate({ left: -220 },0);有效。那时不需要mouseout的完整功能。

这是小提琴：http: //jsfiddle.net/u7EaQ/2/

Answer 2

对匹配选择器的可能动态元素使用.delegate()版本。.on()就像是：

jQuery.noConflict();
jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
    $(document).on('mouseenter', '.hover', function(e) {
        var t = $(this).find('.thumbimg'),
            t2 = $(this).find('.thumbtxt2').css('left', -220);
        if ($(window).width() < 9999) {
            t.stop().animate({ opacity: .0 }, 200);
            t2.stop().animate({ left: 0 }, 200);
        }
        else {
            t.stop().animate({ opacity: .5 }, 200);
        };
    })
    .on('mouseleave', '.hover', function(e) {
        var t = $(this).find('.thumbimg'),
            t2 = $(this).find('.thumbtxt2');
        if ($(window).width() < 9999) {
            t.stop().animate({ opacity: 1 }, 200);
            t2.stop().animate({ left: 220 }, 200);
        }
        else {
            t.stop().animate({ opacity: 1 }, 200);
        };
    })
});
// Code that uses other library's $ can follow here.

例子