Jquery Klick-Funktion löst nur Animation zum ersten Mal

gibt es bereits viele Beiträge, die zu meinem Problem gehören. Aber ich konnte keine Lösung finden. Ich muss sagen, dass ich ein ziemlich guter Javascript-Anfänger bin.Jquery Klick-Funktion löst nur Animation zum ersten Mal

Ich möchte ein animiertes Overlay auf jeden einzelnen von 4 Schiebereglern setzen, wobei die Hintergrundfarbe nach dem Klick allmählich animiert wird. Die Schieberegler wechseln, wenn auf eine Schaltfläche mit der Klasse "tparrows" geklickt wird. Ich fügte jedem der 4 Schieberegler, die "Overlay-Wrapper" genannt wurden, ein leeres, absolut positioniertes Div hinzu, das mit Keyframes mit Hintergrundfarbe gefüllt werden sollte.

HTML einzelnen Schieberelementes (Slider Revolution)

<ul> 
     <li data-transition="fade"><div class="overlay-wrapper"></div><img src="images/slider/picture.jpg" alt="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"/> 
      <h1 class="tp-caption large sfr" data-x="30" data-y="213" data-speed="600" data-start="800" data-easing="Sine.easeOut"><span>Some Text</span></h1> 
      <h2 class="tp-caption medium sfr" data-x="30" data-y="310" data-speed="800" data-start="900" data-easing="Sine.easeOut"><span>Some Text</span></h2> 
      <h3 class="tp-caption small sfr" data-x="30" data-y="450" data-speed="900" data-start="1000" data-easing="Sine.easeOut"><span><span class="budicon-plus"></span>Some Text</span></h3> 

     </li> 
...

Das ist mein CSS-Code:

.overlay-wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 
.overlay { 
    background-color: rgba(55, 55, 59, 0.5); 
    -webkit-animation: bg-color-anim 9s ease-in; 
    animation: bg-color-anim 9s ease-in; 
} 

@-webkit-keyframes bg-color-anim { 
    from { 
     background-color: rgba(55, 55, 59, 0); 
    } 
    to { 
     background-color: rgba(55, 55, 59, 0.5); 
    } 
} 
@keyframes bg-color-anim { 
    0% { 
     background-color: rgba(55, 55, 59, 0); 
    } 
    100% { 
     background-color: rgba(55, 55, 59, 0.5); 
    } 
}

Das ist mein JQuery, dass die Klasse hinzufügen sollte (Overlay) mit Animation auf den div (overlay-wrapper) wenn click (tparrows) geklickt wird:

$(document).ready(function() { 
    $(".tparrows").on('click', function() { // here $(this) is refering to document 
    $(".overlay-wrapper").addClass('overlay'); 
    }); 
});

Es funktioniert aber nur das erster Klick! Das nächste Mal wird der Hintergrund hinzugefügt, aber ohne Animation.

Jede Hilfe wäre sehr willkommen! Vielen Dank! Cheers, Pierre

Quelle

2017-06-30 Pierre Hansen

Bitte posten Sie auch Ihre HTML. –

versuchen, Code-Snippet – tinamou

zu erstellen, habe gerade getan, danke Nilesh –

Ich habe Ihren Code hier aktualisiert. Es wird helfen, das Problem zu verstehen. Ich benutzte toggleClass jquery-Methode, um Klasse hinzuzufügen/zu entfernen.

$(document).ready(function() { 
 
    $(".tparrows").on('click', function() { // here $(this) is refering to document 
 
    $(".tparrows").toggleClass('overlay'); 
 
    }); 
 
});

.overlay-wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.tparrows{ 
 
background :red; 
 
cursor:pointer; 
 
} 
 
.overlay { 
 
    background-color: red; 
 
    -webkit-animation-name: bg-color-anim; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
 
    animation-name: bg-color-anim; 
 
    animation-duration: 4s; 
 
} 
 

 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes bg-color-anim { 
 
    from {background-color: red;} 
 
    to {background-color: yellow;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes bg-color-anim { 
 
    from {background-color: red;} 
 
    to {background-color: yellow;} 
 
}

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="tparrows"> 
 
<ul > 
 
     <li data-transition="fade"><div class="overlay-wrapper"></div><img src="http://lorempixel.com/600/250/sports/1/Lorem%20Pixel/" alt="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"/> 
 
      <h1 class="tp-caption large sfr" data-x="30" data-y="213" data-speed="600" data-start="800" data-easing="Sine.easeOut"><span>Some Text</span></h1> 
 
      <h2 class="tp-caption medium sfr" data-x="30" data-y="310" data-speed="800" data-start="900" data-easing="Sine.easeOut"><span>Some Text</span></h2> 
 
      <h3 class="tp-caption small sfr" data-x="30" data-y="450" data-speed="900" data-start="1000" data-easing="Sine.easeOut"><span><span class="budicon-plus"></span>Some Text</span></h3> 
 

 
     </li> 
 
     </ul> 
 
     </div> 
 
</html>

Andere Art und Weise Overlay-Klasse aus dem Element entfernen und es wieder hinzuzufügen auf diesem elemetn Code unten sehen.

$(document).ready(function() { 
    $(".tparrows").on('click', function() { 
     $(".overlay-wrapper").removeClass('overlay'); 
     $(".overlay-wrapper").addClass('overlay'); 
    }); 
});

Quelle

2017-06-30 11:08:19

Dank Nilesh, habe ich beide Versionen ausprobiert. Es gibt keine Änderung, wenn ich die removeClass-Funktion hinzufüge. Nach dem ersten Klick wird der Hintergrund ohne Animation hinzugefügt. Mit der Funktion toggleClass wird jeder zweite Schieberegler überlagert. –

@pierre: Ich habe obige Antwort aktualisiert, schau mal rein. Wenn eine Animation jedoch beendet ist, wird wieder der ursprüngliche Stil angezeigt. Im obigen Beispiel klicken Sie auf den roten Teil und die Animation beginnt. –

Jquery Klick-Funktion löst nur Animation zum ersten Mal

Antwort

Verwandte Themen