Jquery "toggle" method is behaving wierdly

Question

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?

http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed — Barmar, Jul 24 '13 at 17:16
possible duplicate of [Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone?](http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone) You can find advice on what to do there. — Barmar, Jul 24 '13 at 17:18
should I use the jquery migrate plugin or try the new toggle fnction — Swaroop Nagendra, Jul 24 '13 at 17:21
There is no new toggle function, it's just the old one that toggles visibility — adeneo, Jul 24 '13 at 17:24
I mean 'data'. Should I use this data or just use migrate.js? — Swaroop Nagendra, Jul 24 '13 at 17:28
If you need to support old code you include migrate, if your writing new code you write valid code and implement your own toggle, no need for migrate. — adeneo, Jul 24 '13 at 17:31

score 3 · Accepted Answer · answered Jul 24 '13 at 17:18

3

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.

answered Jul 24 '13 at 17:18

adeneo

312,895
29
395
388

Sorry I did not get the last line "Adding multiple css lines" what is that? – Swaroop Nagendra Jul 24 '13 at 17:27
If you add marginLeft three times in the same object, it does not animate marginLeft three times – adeneo Jul 24 '13 at 17:27
Oh, yeah its like that... sweet got it – Swaroop Nagendra Jul 24 '13 at 17:32
@adeneo you did it wrong! you ddn't make an ajax redirect after the square reached the right! :P – SpYk3HH Jul 24 '13 at 18:04
@SpYk3HH - I was going to, then it struck me, I could just submit a form ! – adeneo Jul 24 '13 at 18:21

score 1 · Answer 2 · answered Jul 24 '13 at 17:21

toggle is gone. You might want to use data attribute to do this by yourself :

$("p").on("click", function () {
    if ($(this).data("click")) {
        alert("Click 2");
        $(this).data("click", false);
    } else {
        alert("Cliclk 1");
        $(this).data("click", true);
    }
});

Jquery "toggle" method is behaving wierdly

2 Answers2

Linked