jquery animate-Funktion -klicke einen div-Schalter einen anderen

Question

Habe diese jquery-Funktion, die mir immer die zweite Funktion gibt, jedes Mal wenn ich klicke. Wie kann ich das stoppen?

Ich habe eine Navbar, die 3 Links hat und für jeden Link habe ich ein .contentDiv mit verschiedenen IDs. Jedes Mal, wenn jemand auf einen dieser Links klickt, findet die Toggle-Funktion statt; versteckt alle .contentDiv erwarten die mit dieser Verbindung verknüpft ist. und eine Animation auf der linken Seite des Gleitens tritt zu, dass man .contentDiv

HTML:

.navbar 
ul 
    li 
     a.about(href='#') About 
      span 
      span 
    li 
     a#portfolio(href='#') HOME 
      span 
      span 
    li 
     a(href='#') Contact 
      span 
      span 
.contentDiv#portfolioContent 
        .title About 
        .content 
         .fse 
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

CSS:

.contentDiv { 
    transform: skew(45deg); 
    width: 100%; 
    height: 100%; 
    position: relative; 
    top: 5%; 
    left: 300%; 
    overflow: hidden; 
} 

.title { 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    font-size: 500%; 
    font-family: Raleway; 
    font-weight: 800; 
    color: #EAEBED; 
} 

.content { 
    width: 100%; 
    height: 50%; 
    top: 43%; 
    left: 3%; 
    font-size: 130%; 
    font-family: Raleway; 
    color: #EAEBED; 
    position: absolute; 
    overflow:scroll; 
    padding-bottom: 7%; 
} 

JQuery:

$('.about').click(function() { 
    $("#aboutContent").toggle(
     function() { 
      $("#aboutContent").animate({left: "115%"}, { //coming out of hiding 
       duration: 2000 
      }); 
     }, function() { 
      $("#aboutContent").animate({left: "300%"}, { //back into hiding 
       duration: 2000 
      }); 
     } 
    ); 
}); 

Answer 1

Sie können eine clickToggle Funktion erstellen und zwischen Funktionen auf Klick wechseln verwenden:

Quelle: jQuery click/toggle between two functions

(function($) { 
 
    $.fn.clickToggle = function(func1, func2) { 
 
     var funcs = [func1, func2]; 
 
     this.data('toggleclicked', 0); 
 
     this.click(function() { 
 
      var data = $(this).data(); 
 
      var tc = data.toggleclicked; 
 
      $.proxy(funcs[tc], this)(); 
 
      data.toggleclicked = (tc + 1) % 2; 
 
     }); 
 
     return this; 
 
    }; 
 
}(jQuery)); 
 

 
$('.about').clickToggle(function() { 
 
    alert("First handler for .toggle() called."); 
 
    $("#aboutContent").toggle("Slow"); 
 
}, function() { 
 
    alert("Second handler for .toggle() called."); 
 
    $("#aboutContent").toggle("Slow"); 
 
});

#aboutContent { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
}

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

 

 
<button class="about"> 
 
    CLICK 
 
</button> 
 

 
<div id="aboutContent"> 
 
    123123123 
 
</div>

Answer 2

var c = 1; 
 
$('.about').click(function() { 
 
    $("#aboutContent").toggle(function() { 
 
    c++; 
 
    if (c % 2 == 0) alert("1") 
 
    else alert("2"); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
try this: 
 
<button class="about"> 
 
    click 
 
</button> 
 

 
<div id="aboutContent"> 
 
    code.. 
 
</div>

Answer 3

Die jQuery Toggle (Funktion), um zwischen zwei angegebene Funktionen werden in Version 1.8 veraltet und in 1.9 wie erwähnt here entfernt. toggle() wird jetzt verwendet, um show() und hide() nur zu alternieren.

Sie müssen also ein angepasstes Toggle-Plugin erstellen, wie in der anderen Antwort erwähnt, oder Sie können dies überprüfen stack overflow question and answer.