Question

我目前有一个mouseover / mouseout事件 - 我希望在鼠标悬停时动画完成后显示一个div，并在动画开始鼠标输出之前隐藏div。

我不能让它相对于动画后显示的div显示，或者正确排队。

Answer 1

您需要使用animate()的回调函数参数将message div附加到相关的box。您还应该使用hover。试试这个：

$('.box').hover(
    function() {
        var $box = $(this);
        $box.stop().animate(
            { width: '280px', height: '420px'},
            650,
            function() {
                var $div = $("<div></div>").addClass("message").text("Message text");
                $box.append($div);
                $div.fadeIn();
            }
        );
    },
    function() {
        var $box = $(this);
        $(".message", $box).fadeOut(function() {
            $box.stop().animate({ width: '100px', height: '100px' }, 650);
        });        
    }
);

Example fiddle

Answer 2

我认为这不是你想要的。但我认为它会让你走上正确的道路： http://jsfiddle.net/r6xbp/

编辑：优化 http://jsfiddle.net/r6xbp/2/

使用jQuery在悬停图像下添加DIV

2 个答案: