Example

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

将.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.

Example

Answer 2

出于某种原因，t2 = $(this).find('.thumbtxt2').css("left", "-220");不起作用。使用.animate（）t2 = $(this).find('.thumbtxt2').animate({ left: -220 },0);可以正常工作。那时不需要鼠标输出的完整功能。

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

Jquery悬停在问题中

2 个答案:

Example