éviter la transition après vol stationnaire js

Question

Bonjour j'ai ce code:

function goto(id, t){ 
    //animate to the div id. 
    $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500); 

    // remove "active" class from all links inside #nav 
    $('#nav a').removeClass('active'); 

    // add active class to the current link 
    $(t).addClass('active'); 

} 

ce code actif le défilement horizontal du diaporama, et dans la seule page de diaporama sont présents plus div (div1, div2, div3) et à chacun des div est joint ce code:

$("#div1").hover(function() { 
    var $this = $(this); 
    $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({ 
     'height': "390", 
     'width' : "840", 
     'marginTop' : "-12", 
     'marginLeft' : "-12", 
    }); 
}, 
function() { 
    var $this = $(this); 
    $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({ 
     'height': "350", 
     'width' : "800", 
     'marginTop' : "0", 
     'marginLeft' : "0" 
    }); 
}); 

c'est le code HTML:

<a href="#" onClick="goto('#about', this); return false; " > 
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;"> 
            ABOUT 
           </div></a> 

la pr oblem est que lorsque je clique sur un div qui est présent dans la page Un du diaporama, par exemple div1, et je l'ai besoin de se déplacer horizontalement sur la deuxième page, ayant la souris à l'intérieur de la dernière div se déplace avec le défilement rester dans la page Un, comment puis-je éviter cela?

Je souhaite que lorsque je clique sur le système va à la deuxième page du diaporama, mais pas avec lui aussi faites glisser le div que j'ai cliqué pour passer à la deuxième page.

Answer 1

Modifié le code suivant, à l'intérieur du goto(). Ici, je vérifie si #div2 est dans l'état plané.

Si oui, alors je le ramène à son état d'origine ET SEULEMENT ALORS je passe à la page suivante.

if (parseInt($("#div2").css("z-index"), 10) > 1) { 
    $("#div2").css({ 
     'z-index': '1', 
     'boxShadow': '0px 0px 0px ', 
     'position': 'static' 
    }).animate({ 
     'height': "250", 
     'width': "250", 
     'marginTop': "0", 
     'marginLeft': "0" 
    }, function(){ 
     $(".contentbox-wrapper").animate({ 
     "left": -($(id).position().left) 
     }, 600); 
    }); 
} 
else { 
    $(".contentbox-wrapper").animate({ 
     "left": -($(id).position().left) 
    }, 600); 
} 

Check it here

MISE À JOUR:

Il suffit d'ajouter une condition d'autre, vérifiez le code de mise à jour ci-dessus.

Link