CODEWITHSUNDEEP
jquery
Shawn V
Shawn V

Reputation: 127

Issue with Jquery working in older version, but not newer

I have this Jquery and I've manage to get it to work (Im not very good at jQuery). But I can't get it to work in v1.11.0. This will work in v1.8.3. When I switch up the version the clickme button seems to be swallowed up. Here is Fiddle link http://jsfiddle.net/meD7b/782/

Here is the code for those of you that will be able to see it without having to look at the fiddle. JQUERY

$("#dropbuttons").css({"top": "0px"});
$("#drop_button").toggle(function () { 
    $("#dropbuttons").animate({"top": "+115px"}, "slow"); 
},
function () { 
    $("#dropbuttons").animate({"top": "0px"}, "slow"); 
});

I've tried searching all over to find out why this is the case but I haven't been able to figure it out. Can someone here help me get this to work in the 1.11.0 version please?

Upvotes: 0

Views: 44

Answers (2)

Shaunak D
Shaunak D

Reputation: 20626

Toggle Event

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

Currently toggle() is an animation method provided by jQuery.

Updated Fiddle

$("#div2").css({"top": "0px"});
$("#clickme").click(function () {
    if ($('#div2').css('top') !== '115px') {
        $("#div2").animate({"top": "+115px"}, "slow");
    } else {
        $("#div2").animate({"top": "0px"}, "slow");
    }
});

Upvotes: 2

David Barker
David Barker

Reputation: 14620

So as .toggle() event is deprecated in 1.8 and you want to use 1.11+ you can do something similar to this jsFiddle example

using .on instead to handle the click event.

$("#clickme").on('click', function(event) {
    var toggle = $("#div2"),
        animation = { top : "+115px" };

    if (toggle.css('top') !== "0px")
        animation.top = "0px";

    toggle.animate(animation, "slow");
});

This example doesn't have any checks to see if the animation is in progress, you may want to add that in before using it.

You can also use the .toggle animation if you wished rather than conditional css checking.

Upvotes: 1

Related Questions