CODEWITHSUNDEEP
jqueryjquery-animatetoggle
gyzhor
gyzhor

Reputation: 1

jQuery toggle keeps repeating

I'm pretty new to jQuery, but seemed like it's a no-brainer. Just the same, I can't figure it out. I'm trying to toggle between two animation functions, but when function two completes, it goes ahead and calls function one as well.

function toggleThis(){
    $("#navSliderArrow").toggle(function() {       
        $(this).animate({ marginLeft: '235' }, 500);
        $("#sliderArrow").attr("src", "images/hide_nav.gif");
    }, function() {       
        $(this).animate({ marginLeft: '0' }, 500);
        $("#sliderArrow").attr("src", "images/show_nav.gif");
    });
}

What am I doing wrong? ~gyz

Upvotes: 0

Views: 2559

Answers (3)

Sparky
Sparky

Reputation: 98738

Quote OP:

"What am I doing wrong?"

As per the jQuery documentation, your syntax is wrong. You cannot have two callback functions inside toggle().

.toggle( [duration] [, easing] [, callback] )

  • duration - A string or number determining how long the animation will run.
  • easing - A string indicating which easing function to use for the transition.
  • callback - A function to call once the animation is complete.

EDIT:

After reading the other answers, I see that there is another version of jQuery toggle()...

http://api.jquery.com/toggle-event/

.toggle( handler(eventObject), handler(eventObject) [,handler(eventObject)] )

  • handler(eventObject) - A function to execute every even time the element is clicked.
  • handler(eventObject) - A function to execute every odd time the element is clicked.
  • handler(eventObject) - Additional handlers to cycle through after clicks.

Properly implemented, your jQuery should look like something like this...

$(document).ready(function() {
    $("#navSliderArrow").toggle(
        function() {       
            $(this).animate({ marginLeft: '235' }, 500);
            $("#sliderArrow").attr("src", "images/hide_nav.gif");
        },
        function() {       
            $(this).animate({ marginLeft: '0' }, 500);
            $("#sliderArrow").attr("src", "images/show_nav.gif");
        }
    );
});

And with jQuery, there is absolutely no need for any inline JavaScript like <a href="#" onclick="togglethis()">. Your HTML should look something like...

<a href="#" id="navSliderArrow">

I only say "something like" that since your HTML is not included in your OP and I have no idea what your target elements are supposed to be.

jsFiddle DEMO

Upvotes: 0

Sam Tyson
Sam Tyson

Reputation: 4626

There is also an event handler version of .toggle() - http://api.jquery.com/toggle-event/

The toggle event handler binds the click method itself, so you just need to directly perform the animation:

$("#navSliderArrow").toggle(
    function() {       
        $(this).animate({ marginLeft: '235' }, 500);
        $("#sliderArrow").attr("src", "images/hide_nav.gif");
    }, 
    function() {       
        $(this).animate({ marginLeft: '0' }, 500);
        $("#sliderArrow").attr("src", "images/show_nav.gif");
    }
);

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79840

From my comment earlier,

As far as I know, .toggle has only one callback function. Not sure what happens when you have 2 functions like that.. Anyways, What are you trying to achive here?

Read more .toggle API doc

I assume that you are trying to show and hide onclick of #sliderArrow. If so then try below,

   $(function () {
       var $slideArrow = $("#sliderArrow");
       var $navSlideArrow = $('#navSliderArrow');
       $slideArrow.on ('click', function () {              
          if ($slideArrow.attr('src').indexOf('show') >= 0) {
                $navSlideArrow.animate({ marginLeft: '235' }, 500);
                $slideArrow.attr("src", "images/hide_nav.gif");
          } else {
                $navSlideArrow.animate({ marginLeft: '0' }, 500);
                $slideArrow.attr("src", "images/show_nav.gif");
          }
       });
   });

Upvotes: 1

Related Questions