如何從右向左滑動使用div顯示內容

我看到了一個小提琴。當光標懸停在它上面時，它從下到上進行動畫處理。如何從右向左滑動使用div顯示內容

我該如何改變它，以便在點擊時，它會從右到左進行動畫製作，然後，內容會被隱藏起來？當內容被隱藏時，會出現一個按鈕，我可以點擊該按鈕讓內容再次顯示。

HTML

<html> 
<body> 
<div class="wrapper"> 
<div class="inner"> 
    Sliding div here!! Yay!! 
    </div> 
    </div> 
    <p>Hover over red div please!!</p> 
</body> 
</html>

CSS

.wrapper{ 
background-color:red; 
    width:200px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
    color:white; 
} 

.inner{ 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:black; 
    margin-top:200px; 
color:white; 
}

jQuery的

$(document).ready(function(){ 
var innerHeigth = $(".inner").outerHeight(); 
$(".wrapper").hover(function(){  $(".inner").stop().animate({top:-innerHeigth},1000); 
//alert(innerHeigth) 
},function(){ 
$(".inner").stop().animate({top:0},1000); 

}); 
});

，這裏是小提琴http://jsfiddle.net/qGVfp/

來源

2013-02-13 Francis Alvin Tan

有你需要做2度的變化。第一調節樣式表，以便移動DIV是關閉的左，而不是底部：

.inner{ 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:black; 
    left:-200px; 
    color:white; 
}

，然後改變JavaScript來的點擊反應，可根據寬度和修改左屬性。請注意，有一種切換方法的行爲非常像懸停，但它已從jQuery中移除，因此您必須具有一個跟蹤狀態的布爾值。

$(document).ready(function(){ 
    var width = $(".inner").width(); 
    var toggle = true; 
    $(".wrapper").click(function(){ 
     if(toggle) { 
      $(".inner").stop().animate({left:0},1000); 
     } else { 
      $(".inner").stop().animate({left:-width},1000); 
     } 
     toggle = !toggle; 
    }); 
});

這裏有一個更新的小提琴：http://jsfiddle.net/qGVfp/30/

來源

2013-02-13 04:32:55

這個點擊是怎麼樣的，點擊顯示並再次點擊隱藏 – 2013-02-13 05:03:00

@FrancisAlvinTan我更新了我的答案，它現在點擊切換。 – 2013-02-13 14:04:32

.wrapper2{ 
    background-color:blue; 
    width:400px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
    color:white; 
} 

.inner2{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    background-color:black; 
    margin-left:400px; 
    color:white; 
} 


$(".wrapper2").hover(function(){  
     $(".inner2").stop().animate({marginLeft:200},1000); 
//alert(innerHeigth) 
    },function(){ 
     $(".inner2").stop().animate({marginLeft:400},1000); 
    }); 
});

http://jsfiddle.net/bighostkim/vJrJh/

來源

2013-02-13 04:37:28 allenhwkim

你基本上是有隻需要改變周圍的一些東西。

HTML

<!DOCTYPE html> 
<html> 
<body> 
    <div class="wrapper"> 
     <div class="inner"> 
      Sliding div here!! Yay!! 
     </div> 
    </div> 
    <button id="btn">click</button> 
</body> 
</html>

CSS

.wrapper { 
    background-color:red; 
    width:200px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
    color:white; 
} 

.inner { 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:black; 
    left:200px; 
    color:white; 
}

SCRIPT

var hidden = true; 

$(document).ready(function(){ 
    $("#btn").click(function() { 
     if(hidden) { 
      $(".inner").stop().animate({left:0}, 1000); 
      hidden = false; 
     } 
     else {   
      $(".inner").stop().animate({left:200},1000); 
      hidden = true; 
     } 
    }); 
});

這裏是顯示這個提琴：http://jsfiddle.net/qGVfp/31/

來源

2013-02-13 04:37:53 tjscience

你好，這是我想要的，但它可以停止並再次點擊隱藏:-) – 2013-02-13 04:53:14

我更新的答案確實提供了一個解決方案。 – tjscience 2013-02-13 14:24:13

如何從右向左滑動使用div顯示內容

回答

相關問題