hide showトグル効果を変更しますか？

Question

私は以下のコードでうまく動作する要素を持っています。 ＃obj1というオブジェクトは、ページを読み込むときに非表示になっていますが、＃obj2をクリックすると表示されます。

#obj1{ 
    position:fixed; 
    width:100px; 
    bottom:180px; 
    right:100px; 
    display:none; 
} 

$("#obj1").hide(); 
$("#obj2").show();$('#obj2').toggle(function(){ 
$("#obj1").slideDown(function(){}); 
},function(){ 
$("#obj1").slideUp(function(){}); 
}); 

が、私はこのようにそれを持ってしたいと思います：

$("#obj1").css({"opacity": "0","bottom": "180"}) 
$("#obj2").toggle(
function() { 
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow"); 
},function() { 
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow"); 
}); 

私はそれがフェードインしたいのですが、どのように私は、最初のスクリプトにアニメーションを追加するには？

Answer 1

ここでは、CSSを使用した要素のフェーディングの非常に簡単なデモです。（アニメーション例：.animate（{"opacity"： "1"、 "bottom"： "140"}、 "slow" jQueryを使用すると、クリックイベントを介してクラスを追加できます。

// HTML 
<div id="myId" class="hide"> 
    This is div with myId 
</div> 

// CSS 
.hide { 
    display: none; 
} 
.myId { 
    animation: fadein 2s; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

// JQUERY 
$("#myId").removeClass("hide").addClass("myId"); 

実用デモhereが表示されます。あなたはobj2または好きな場所をクリックしてトリガするように修正するだけでいいです

EDIT - 上記のあなたのコメントに従って、私はペンを編集したので、要素がページの読み込み時に非表示になり、クラスが表示されます削除され、アニメーションクラスが追加されました。

Answer 2

あなたはcss内でスタイルを維持し、jsを使用して状態を変更するだけで（クラスの追加/削除）、スタイルを維持することをお勧めします。 JavaScriptを持っている方法はまずまずですが、それは彼らが誤って同期から抜け出すことができないので、それ自体に基づいて切り替えることにするクラスのためのより良いだろう：

$('#obj2').on('click',function(e){ 
 
    e.preventDefault(); 
 
    if($('#obj1').hasClass('js-on')) 
 
    $('#obj1').removeClass('js-on'); 
 
    else 
 
    $('#obj1').addClass('js-on'); 
 
});

#obj1{ 
 
     position:absolute; 
 
     width:100px; 
 
     bottom:10px; 
 
     right:20px; 
 
     opacity: 0; 
 
     
 
     background-color: yellow; 
 
     padding: 1em; 
 
     
 
     transition: .5s opacity, .5s bottom; 
 
    } 
 
    #obj1.js-on { 
 
     opacity: 1; 
 
     bottom: 40px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="obj2" href="#">Click me</a> 
 

 
<div id="obj1">Hi</div>

Answer 3

$(document).ready(function() { 
$("#obj1").hide(); 
$("#obj2").show(); 
}); 

$('#obj2').toggle(function(){ 
$("#obj1").slideToggle(); 
}); 

を

obj2を押したときにスライドすると、obj1と表示されます。 、それは試してみてください代わりにフェードイン

$("#obj2").click(function() { 
$("#obj1").fadeToggle("slow","swing"); 

を持っているためにこれが中とフェードアウトobj1を切り替えます。少し疑問に惑わさ http://api.jquery.com/fadetoggle/

Answer 4

が、ここでの答えで私の試みです：：

参照、それはあなたが `css`と` jqueryのを混乱さ

$(".obj1").click(function(){ 
 
\t $(".obj2").css('opacity', 0) 
 
    \t .slideDown('slow') 
 
    \t .animate(
 
    { opacity: 1 }, 
 
    { queue: false, duration: 'slow' } 
 
); 
 
});

.obj1 { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background: lightgrey; 
 
} 
 

 
.obj2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    display:none; 
 
}

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

 

 
<div class="obj1">click me</div> 
 
<div class="obj2"></div>