讓頂部元素淡出，底部元素淡入鼠標懸停，然後讓頂部元素在鼠標停止懸停後淡入？

我想在tumblr上設置一些東西，所以我可以基本上讓一個元素更改爲另一個，當鼠標懸停在它上面時，例如：當鼠標懸停在它上方時，將圖片更改爲一個文本框，但是當鼠標離開文本框，它會變回圖片。讓頂部元素淡出，底部元素淡入鼠標懸停，然後讓頂部元素在鼠標停止懸停後淡入？

理想情況下，我想那裏是在畫面的頂部一個字，當我將鼠標懸停在圖片中，一個詞就消失了，我的文字其餘的用武之地。

here is an example of what I want to happen

我一直在尋找幾個小時，而我一直沒能找到像我這樣做的事情。如果你想看代碼，我從here得到它。

有很多代碼，我真的不知道我在做什麼。我嘗試從示例中拉出代碼並將其植入我的代碼中，但實際上太多了。

如果有人知道我想通過給出的例子來完成什麼，你會介意將它設置在jfiddle中，以便我可以看到我想要做什麼？謝謝你的幫助！

來源

2013-10-16 BrendanMann_1

它可以通過jQuery hover和animate來實現。

這裏是my sample code。

HTML：

<img id="bg" src="http://www.stockfreeimages.com/White-and-grey-clouds-thumb10225136.jpg"/>  
<div class="title box">title</div> 
<div class="content box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>

腳本：

$("#bg").hover(function(){ 
$(".title").stop().animate({left:"300px",opacity:0.0},1000,function(){$(this).hide()}); 
    $(".content").fadeIn(); 
},function(){ 
    $(".title").stop().show().animate({left:"100px",opacity:1.0},1000) 
    $(".content").fadeOut(); 
});

CSS：

.box{ 
    position:absolute; 
    left:100px; 
    color:white; 
    z-index:1; 
    pointer-events:none; 
} 
.title{ 
    top:70px; 
} 
.content{ 
    top:100px; 
    width:300px; 
    display:none; 
}

來源

2013-10-16 03:50:42

下面是內置在jQuery函數時間控制的例子。

這裏是一個的jsfiddle例如：CLICK HERE

HTML：

<div class="image-holder"> 
    <div class="slide-in">Bob Marley</div> 
    <div class="fade-in">Open your eyes, look within. Are you satisfied with the life you're living?</div>

CSS：

.image-holder { 
    position: absolute; 
    width: 350px; 
    height: 400px; 
    top: 20px; 
    left: 20px; 
    background-image: url("http://samuiartsandcrafts.com/images/watermarked/1/thumbnails/1/400/bob-marley-pop-art-e.jpg"); 
    background-position: center; 
    background-size: cover; 
} 
.slide-in, .fade-in { 
    position: absolute; 
    font-family:"Courier", sans-serif; 
} 
.slide-in { 
    opacity: 1; 
    left: 10px; 
    top: 0; 
    font-size: 22px; 
} 
.fade-in { 
    opacity: 0; 
    left: 0px; 
    padding: 10px; 
    bottom: 10px; 
    width: 350px; 
    background: rgba(0, 0, 0, .5); 
    font-size: 18px; 
    color: #FFFFFF; 
}

的jQuery：

$('.image-holder').hover(function() { 
    $('.fade-in', this).stop().animate({ 
     opacity: 1}); 
    $('.slide-in', this).stop().animate({ 
     opacity: 0, 
     left: "120px", 
    }, 1000); 
}, function() { 
    $('.fade-in', this).stop().animate({ 
     opacity: 0}); 
    $('.slide-in', this).stop().animate({ 
     opacity: 1, 
     left: "10px", 
    }, 1000); 
});

來源

2013-10-16 06:29:11

讓頂部元素淡出，底部元素淡入鼠標懸停，然後讓頂部元素在鼠標停止懸停後淡入？

回答

相關問題