CODEWITHSUNDEEP
jquery
Yala Yala Herzlin
Yala Yala Herzlin

Reputation: 632

Why this effect only works the first time only?

I found here on stackoverflow this useful piece of code, but for some reason it only works on the first time it is applied and never again....

How can I make the animation work always and not only the 1st time?

Source: How to run jQuery fadeIn() and slideDown() simultaneously?

jQuery(document).ready(function( $ ) {

  var something3 = document.getElementById('nav-action');

  something3.style.cursor = 'pointer';

  something3.onclick = function() {

    $(".menu-item")
      .css('opacity', 0)
      .slideDown('slow')
      .animate(
        { opacity: 1 },
        { queue: false, duration: 'slow' }
      );

  });

This is my CSS

.menu-item {
  font-size: 61px;
  font-weight: 100 !important;
  list-style: outside none none;
  margin-top: 12px;  list-style: none;
  padding: 5px; opacity:0;
  display:none;
}

Upvotes: 1

Views: 80

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241178

The reason it was only working once was because the .slideDown() method would set the display of the element to block, and then on every other click you were only animating the opacity. You could chain the .hide() method in order to hide the element before animating it.

In doing so, it will work multiple times:

Updated Example

$(".menu-item")
  .hide()
  .css('opacity', 0)
  .slideDown('slow')
  .animate(
    { opacity: 1 },
    { queue: false, duration: 'slow' }
);

Upvotes: 3

Related Questions