如何使用jquery和css隱藏和淡入div

Question

我有一個下面的HTML，我想讓這些下面的div顯示它們在另一個之上，其中隱藏了「world」，並且id爲「hello」的div淡出，而ID爲「世界」的div在此後淡出？

我使用jQuery和CSS：

<div id="main"> 
    <div id="hello">test</div> 
    <div id="world">test</div> 
</div> 

Answer 1

您可以使用hide，fadeOut和fadeIn考慮您的jquery是ready

$('#world').hide(); 
 
$('#hello').fadeOut(function() { 
 
    $('#world').fadeIn(function() { 
 
    //do your stuff 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="hello">hello</div> 
 
    <div id="world">world</div> 
 
</div>

你甚至可以躲世div最初與CSS usi ng display: none屬性，因爲$('#world').hide()完全一樣。

var duration = 2000; //in milliseconds 
 

 
$('#hello').fadeOut(duration, function() { 
 
    $('#world').fadeIn(duration, function() { 
 
    //do your stuff 
 
    }); 
 
});

#world { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="hello">hello</div> 
 
    <div id="world">world</div> 
 
</div>

瞭解更多關於fading這裏：
https://api.jquery.com/category/effects/fading/

Answer 2

使用jQuery .hide（）與

可以通過提供時間參數更改漸變效果的持續時間褪色：

$("div_name").click(function() { 
     $(this).hide("fade", {}, 1000); 
}); 

淡出：

$("#div_id").click(function() { 
    $("#book").fadeOut("slow", function() { 
    // Animation complete. 
    }); 
}); 

淡入：

$("#div_id").click(function() { 
    $("#book").fadeIn("slow", function() { 
    // Animation complete. 
    }); 
}); 

Answer 3

您駕駛室sinply使用jQuery的。 hide，。 fadeIn和。 淡出事件：

爲.hide（），使用

$('#id').hide("fade",{ 
//do your stuffs 
},time-duration); 

的淡出：

$("#id").fadeOut("duration"); 

的淡入：

$("#id").fadeIn("duration"); 

並分別與你的div使用它們或點擊。