jQuery的。 在两个元素之间移动（一个动画）？

Question

I have an img that pops up (animated with css) and then I animated the image info to slide/fade in when I hovered over the image. The problem is that I can't hover over to the image info (where there would normally be links) because it keeps moving (sliding in) when I enter it.

Here's the fiddle:

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 () {...});

Heads-up: You have a bug where mousing out to the right causes a subsequent hover, throwing the position of .imginfo out of whack.

Answer 2

Okay, I figured it out on my own for my specific situation. Made a new fiddle to illustrate the basics.

First, for moving between the two divs I tweaked this JSFiddle: http://jsfiddle.net/adeneo/LdDBn/ for my needs.

The only problem was since I was animating the images with css, when I hovered over img info, the image would scale back down to it's original size.

To fix this, I deleted the css (only leaving the timing elements for .img otherwise it would animate too quickly) then deleted any effects on .img:hover, but these I moved to change instead with jquery .css().

Here's the final fiddle: 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');
        }
    });
});