Question

我有一个弹出的img（用css动画）然后当我在图像上盘旋时，我将图像信息设置为幻灯片/淡入。问题是我不能将鼠标悬停在图像信息上（通常会有链接），因为它在我输入时会继续移动（滑入）。

这是小提琴：

jQuery的：

$(document).ready(function () {
    $(function ($) {
        $('.imginfo').hide();
        $('.img, .imginfo').hover((function () {
            $(".imginfo").dequeue().fadeIn('slow');
            $(".imginfo").dequeue().animate({
                'left': '-=100px'
            });
        }), function () {
            $(".imginfo").dequeue().fadeOut('slow');
            $(".imginfo").dequeue().animate({
                'left': '+=100px'
            });
        });
    });
});

Answer 1

http://jsfiddle.net/isherwood/YLGGg/3

<div id="wrapper">
    <div class="img">Img</div>
    <div class="imginfo">ImgInfo</div>
</div>

$('#wrapper').hover((function () {...});

单挑：你有一个错误，向右移动导致随后的悬停，使.imginfo的位置失控。

Answer 2

好的，我根据自己的具体情况自行计算出来。做了一个新的小提琴来说明基础知识。

首先，为了在两个div之间移动，我调整了这个JSFiddle：http://jsfiddle.net/adeneo/LdDBn/以满足我的需求。

唯一的问题是因为我用css动画图像，当我在img信息上盘旋时，图像会缩小到原来的大小。

为了解决这个问题，我删除了css（只留下.img的计时元素，否则它会动画太快）然后删除.img上的任何效果：悬停，但这些我改为改为使用jquery .css（）

这是最后的小提琴：http://jsfiddle.net/user100042/YLGGg/6/

jQuery的：

$(document).ready(function () {
    $(function ($) {
        var timer;
        $('.imginfo').hide(); //this wasn't necessary in my final code as I hid it off screen (right:-100%)
        $('.img').mouseenter(function () { //changed to just hover over .img, .imginfo wasn't neccesary
            //$(".img").dequeue().css({
            //css transforms would go here
            $(".imginfo").dequeue().fadeIn('fast'); //sped up all animations to fast to help get rid of problems with fast mouse movements
            $(".imginfo").dequeue().animate({
                'left': '100px' //stopped using += used fixed location instead
            }, 'fast');
        });
        $(".img, .imginfo").mouseleave(function () {
            timer = setTimeout(doSomething, 100); //set to 100 so accidental mouse movements don't stop imginfo animation
        }).mouseenter(function () {
            clearTimeout(timer);   
        });
        function doSomething() {
            //$(".img").dequeue().css({
            //css untransforms (so if previously you scaled to 1.5, here you'd scale back to 1.0)
            $(".imginfo").dequeue().fadeOut('fast');
            $(".imginfo").dequeue().animate({
                'left': '200px' //in the final code I set this to right:-100%
            }, 'fast');
        }
    });
});

JQuery的。在悬停时在两个元素（一个动画）之间移动？

2 个答案: