jQuery的。 在兩個元素之間移動（一個動畫）？

Question

我有一個彈出的img（用css動畫），然后當我將鼠標懸停在圖像上時，將圖像信息設置為動畫/淡入淡出。 問題是我無法將鼠標懸停在圖像信息上（通常會有鏈接），因為當我輸入圖像信息時，它會一直移動（滑入）。

這是小提琴：

http://jsfiddle.net/user100042/YLGGg/

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：hover的任何影響，但是我改用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');
        }
    });
});