jQuery divがオンロードの問題をフェーディングする

-1

私は非常にイライラする問題があります。基本的に私の意図は、jQueryの.toggle（）クラスを使用してdivでアニメーションを作成することでした。問題は、オンロードのdivが消えてしまうことです！私は本当に、なぜ...それを把握することはできません（実際のスクリプトは、以下のコードのCSSのコードセクションの最後で終了している、私は知っていない理由）jQuery divがオンロードの問題をフェーディングする

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); 
    }); 

    });

ありがとうございました！

出典

2016-08-03 soldier

のjQueryのどのバージョン？あなたのフィドルには1つのセットがありません。（ "JAVASCRIPT（歯車）"をクリックして設定してください） – amflare

'toggle（）'はもはやそのように動作しません。あなたは連続したクリックを自分で処理する必要があります –

ドムが準備ができたら、それをトグルしているので消えています。これをクリックリスナー機能内でコーディングする必要があります。 –

のようなものを必要とする（状態を追跡する）最初のクリックで拡大し、2回目のクリックで復元するためにしたいの代わり場合機能がwindowの場合は、ウィンドウの代わりにdocumentにする必要があります。

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

アニメーションについては

を更新し

が、それは、あなたのコードをより複雑にする代わりにcssクラスを記述し、ここでのアニメーションのためのcss transitionsを使用しますjqueryのの.animate()を避けるためには、デモです。

.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

出典

2016-08-03 15:02:39

ありがとう！私の間違い。しかし、まだdivが長くなるのではなくクリックの後に消えます：\ – soldier

私はあなたが今すぐ確認することができます私の答えを更新 –

あなたの助けをありがとうTanzil :)本当にappriciated – soldier

クリックするのではなく、ドキュメント上のトグルを準備するためです。

次にあなたが最後にあなたのコードをクリックで復元拡大したい場合は、この

$（」。スライダー-one1" ）liekでなければなりません。（ 'クリック'、機能（）{ $（この）上.animate （{ 幅： "98vw" }、500、関数（）{ $（この）.stop（）アニメーション（{ 幅： "50vw" }、500）; }）; }）。

あなたは何readyはありません。この

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（溶液2）

出典

2016-08-03 14:57:02 Luca

私は今それを維持する方法を理解しました！クリックした後も長くなるのではなく、まだ消えています。\ – soldier

ターゲットは最初にクリックして拡張し、2回目にリストアしますか？または、同じクリックで拡大して元に戻す（ビートのように）？ – Luca

はい！それは私が達成しようとしていたものです:) 最初にクリックすると2回目のクリック復元が展開されます – soldier

jQuery divがオンロードの問題をフェーディングする

答えて

関連する問題