jQuery Div ausblend onload Problem

-1

Ich habe ein sehr frustrierendes Problem. Im Grunde war es meine Absicht, ein div auf Klick mit der .toggle() - Klasse in jQuery zu animieren. Das Problem ist, dass das div verschwindet nur verschwindet! Ich kann es wirklich nicht herausfinden, warum ... (das eigentliche Skript am Ende des CSS-Code Code-Abschnitt unten beendet ist, ich weiß nicht, warum)jQuery Div ausblend onload Problem

Here's JsFiddle link

HTML

<body> 

    <!-- NAV --> 

    <!-- SLIDER ONE--> 
    <div class="container-fluid slides" style="padding-left: 0px; padding-right: 0px;"> 
     <!-- SLIDER ONE--> 
     <div class="slider-one1 col-md-6 col-sm-6 col-xs-6"></div> 
     <div class="slider-one2 col-md-6 col-sm-6 col-xs-6"></div> 

     <div class="clearfix"></div> 

     <!-- SLIDER TWO--> 
     <div class="slider-two1 col-md-6 col-sm-6 col-xs-6"></div> 
     <div class="slider-two2 col-md-6 col-sm-6 col-xs-6"></div> 

    </div> 


    <!-- cookies notificaton --> 
    </body>

CSS

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; } 


.slides div:hover { 
    opacity: 0.8; } 


.slider-one1 { 
    height: 40vh; 
    width: 50vw; 
    background-color: red; 
    cursor: pointer; } 


.slider-one2 { 
    height: 40vh; 
    width: 50vw; 
    background-color: green; 
    opacity: 0; } 


.slider-two1 { 
    height: 40vh; 
    width: 50vw; 
    background-color: blue; 
    opacity: 0; } 


.slider-two2 { 
    height: 40vh; 
    width: 50vw; 
    background-color: pink; 
    opacity: 0; }

Javasc ript

$(window).ready(function(){ 
     $(".slider-one1").toggle(function() { 
     $(this).stop().animate({ 
      width: "98vw" 
     }, 500); 
    }, function() { 
     $(this).stop().animate({ 
      width: "50vw" 
     }, 500); 
    }); 

    });

Vielen Dank!

Quelle

2016-08-03 soldier

Welche Version von jQuery? Deine Geige hat keinen Satz. (Klicken Sie auf das "JAVASCRIPT (Zahnrad)", um einzustellen) – amflare

'toggle()' funktioniert nicht mehr auf diese Weise. Sie müssen die aufeinander folgenden Klicks selbst behandeln –

Es verschwindet, weil Sie es bei doms bereit schalten. Sie sollten diese Innenklick-Listener-Funktion codieren. –

Es gibt keine ready Funktion für window, sollte es document anstelle von Fenster sein.

$(document).ready(function(){.....});

AKTUALISIERT

Für Animationen vermeiden .animate() von jquery wird es Ihren Code komplexer machen, schreiben css Klassen statt und verwenden css transitions für Animationen ist hier eine Demo.

.animate1 { 
    width: 98vw !important; 
-webkit-transition:all 0.5s ease; 
transition:all 0.5s ease; 
} 

$(document).ready(function(){ 
    $(".slider-one1").click(function(){ 
     $(this).toggleClass("animate1"); 
    }); 

});

Working Fiddle

Quelle

2016-08-03 15:02:39

Vielen Dank! Mein Fehler. Aber immer noch verschwindet das div nach dem Klick, anstatt länger zu werden: \ – soldier

Ich habe meine Antwort aktualisiert Sie können jetzt überprüfen –

Vielen Dank für Ihre Hilfe Tanzil :) Wirklich geschätzt – soldier

Weil Sie den Schalter auf Dokument bereit anstelle von Klick triggern.

Dann, wenn Sie erweitern wollen Ende wiederherstellen auf Code klicken sollte

$ (“. Slider-one1"). Auf ('Klick', function() { $ (this) .animate liek dieser sein ({ Breite: "98vw" }, 500, function() { $ (this) .stop() animiert ({ Breite:. "50vw" }, 500); }); });

wenn statt Sie wollen auf den ersten Klick zu erweitern und auf den zweiten Klick (die Verfolgung des Staates) wiederherstellen müssen Sie so etwas wie dieses

var state = false; 

$(".slider-one1").on('click',function(){ 
    if(!state){ 
    $(this).animate({ 
     width: "98vw" 
    }, 500); 
    state = true; 
    } 
    else{ 
    $(this).animate({ 
     width: "50vw" 
    }, 500); 
    } 
});

Updated jsfiddle (Lösung 2)

Quelle

2016-08-03 14:57:02 Luca

Ich habe jetzt verstanden, wie man es bleiben lässt! aber es verschwindet immer noch nach dem Klicken statt länger zu werden: \ – soldier

Ist Ihr Ziel zuerst klicken, erweitern, zweiten Klick wiederherstellen? Oder möchtest du auf denselben Klick (wie ein Beat) expandieren und wiederherstellen? – Luca

ja! das ist, was ich versucht habe zu erreichen :) Erstes Klicken erweitern zweiten Klick wiederherstellen – soldier

jQuery Div ausblend onload Problem

Antwort

Verwandte Themen