Question

I asked this question and the answer works really well.

The only thing though is that now I need a version that scrolls directly to the respective div instead of scrolling through all of them (i.e. if you hover over the last link, it won t scroll through 6 former divs to get to it).

It still needs to return to the first div when you aren t hovering over the link.

Also, it would be most ideal if there was also a way to stay on that div if you hover over it as well as its link. As of now, the div is not intractable because when you hover over it and leave its link, it scrolls away.

感谢。

Answer 1

这样做:

DEMO fiddle

var flag = false,
    goto = 0,
    hre;

    $( #nav li a ).bind( mouseenter mouseleave , function(e) {
        if (e.type ===  mouseenter ) {
           flag = true;
           hre = $(this).attr( href );
           goto = $(hre).position().top;
           $( #sections ).stop().animate({top :  - +goto },800);  
        } else {
           flag = false;

            setTimeout(function() {
               if( flag != true ){
                  $( #sections ).stop().animate({top :  0  },800);  
               }      
            }, 1000);  
        }
    });

$( #sections ).mouseenter(function(){
   flag = true;
});

After you hover an anchor, go fast into the wrapper and it won t go back to the 1st slide.

BTW... why you just don t create something more... practique? :)

EXAMPLE fiddle

Answer 2

我确信,由于这一原因,你无法要求:

First you want to have the animation return the top when the user is not hovering over the link BUT you also want to be able to stay on the div when the user LEAVES the link and hovers over the div it scrolled to.

这里是你问题的第一部分。

http://jsfiddle.net/YWnzc/8/>rel=“nofollow> http://jsfiddle.net/YWnzc/8/。

我刚才将时间推到0。

Answer 3

Just move the elements around before animating: http://jsfiddle.net/YWnzc/12/.

我使用了$.dotimeout 和 rel=“nofollow”>>,方便。我也把这一数字与一个reg子相提并论。排出时间是为了在不退步的情况下进入干.。



var current, prev;

jQuery( "#nav").delegate( "a", "mouseenter mouseleave", function(e){
    var i, self = this, pos;

    if( e.type == "mouseleave" ) {
        i = 1;   
    } else {
        i = $(this).attr("href").match(/(d)$/)[1];
    }

    //stop the previous animation, otherwise it will be queued
    if(e.type === "mouseleave") {
        var elem = $("#section1").insertBefore(current);
        elem = $("#section1");
        $.doTimeout("test", 500, function() {
            current = $("#section1");
            jQuery("#wrapper").scrollTo(elem, 250);
        });
    } else {
        var elem = $("#section" + i);
        elem.insertAfter(current || "#section1");
        current = elem;
        $.doTimeout("test");
        jQuery("#wrapper").scrollTo(elem, 250);
    }
});

jQuery( "#wrapper").on("mouseover", function() {
    jQuery( "#wrapper").stop();
});

Answer 4

仅删除动画片,并直接填写scrollTop()。

Fiddle Demo:。

DEMO fiddle

EXAMPLE fiddle

友情链接