Jquery“切换”方法表现得很好 [英] Jquery "toggle" method is behaving wierdly

问题描述

我有这样一段代码：

  $（。ani-search）。toggle（
 function（）{
 $（＃header .logo a）。animate（{
 marginLeft： -  = 30px，
 marginLeft： -  = 60px，
 marginLeft： -  = 90px
}）; 
}，
 
 function（）{
 $（＃header .logo a）。animate （{
 marginLeft： -  = 60px，
 marginLeft： -  = 30px，
 marginLeft：0px
}）
} 
 ）; 
  

当我运行相应的html页面时，我没有收到任何VALID切换响应。会发生什么事情，只要我打开页面的类ani搜索的图像闪烁一次，并消失了它，我不会切换任何东西？为什么会发生这种情况？

同样，这里是另一个测试代码

 < p> Hello world< / p> 
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js\"> ;</ script> 
< script> window.jQuery || document.write（'< script src =js / vendor / jquery-1.10.0.js>< \ / script>'）< ; / script> 
< script> 
 $（p）。toggle（
 function（）{
 alert（Cliclk 1）; 
} ，
 function（）{
 alert（Click 2）; 
} 
）; 
< / script> 
  
 
为什么不能在这里切换？
解决方案
  $（。a （''click'，function（）{
 if（！$（this）.data（'state'））{
 $（＃header .logo a）） .animate（{
 marginLeft： -  = 30px，
 marginLeft： -  = 60px，
 marginLeft： -  = 90px
}）; 
} else {
 $（＃header .logo a）。animate（{
 marginLeft： -  = 60px，
 marginLeft： -  = 30px，
 marginLeft：0px
}）; 
 
 $（this）.data（'state'，！$（this）.data（'state'））; 
}）; 
  
  
I have a chunk of code like this: 
$(".ani-search").toggle(
    function(){
        $("#header .logo a").animate({
            marginLeft: "-=30px",
            marginLeft: "-=60px",
            marginLeft: "-=90px"
        });
    },

    function(){
        $("#header .logo a").animate({
            marginLeft: "-=60px",
            marginLeft: "-=30px",
            marginLeft: "0px"
      })
   }
);
When I run the corresponding html page, I do not get any VALID toggle response. What happens is as soon as I open the page the image with class "ani-search" blinks once and vanishes thats it, I do not get to toggle anything? Why is this happening?


Similarly here is another test code"
<p>Hello world</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.0.js"><\/script>')</script>
<script>
    $("p").toggle(
        function(){
            alert("Cliclk 1");
        },
        function(){
            alert("Click 2");
        }
    );    
</script>
same thing happens here, as soon as I load the page in my browser, the text "Hello world" blinks once and I get the alert box with message with "Click 2". Thats it.

Why cant I toggle here?
解决方案
Deprecated and removed, create your own toggle functionality :
$(".ani-search").on('click', function() {
    if (!$(this).data('state')) {
        $("#header .logo a").animate({
            marginLeft: "-=30px",
            marginLeft: "-=60px",
            marginLeft: "-=90px"
        });
    }else{
        $("#header .logo a").animate({
            marginLeft: "-=60px",
            marginLeft: "-=30px",
            marginLeft: "0px"
        });
    }
    $(this).data('state', !$(this).data('state'));
});
FIDDLE

note that adding the same CSS property multiple times does not animate it multiple times, only the last one is used.

                        
这篇关于Jquery“切换”方法表现得很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！