從另一個div內顯示的div動畫製作內容

Question

對於jquery來說真的很新穎，所以任何幫助都會對此表示讚賞。

試圖解決設計挑戰。我需要在另一個div內顯示div的內容，懸停第三個元素。 找到了一些幫助我把它放在一起的代碼，但是我想知道是否有一種方法在顯示時動畫（滑動，淡入淡出等）內容。

任何想法如何在顯示內容時將動畫應用到.html函數？

var divContent = $("#explore-agility-content").html(''); 
$(".industry").hover(
    function() { 
     $("#explore-agility-content").html($(this).find("#shortdesc").html()); 
    }, 
    function() { 
     $("#explore-agility-content").html(divContent); 
    } 
); 

https://jsfiddle.net/rnwebdesigner/3wyrwd92/71/

Answer 1

這裏有淡入淡出懸停效果和鼠標移開

檢查此琴

https://jsfiddle.net/parthjasani/3wyrwd92/72/

var divContent = $("#explore-agility-content").html(''); 
$(".industry").hover(

    function() { 
     $("#explore-agility-content").html($(this).find("#shortdesc").html()); 
     $("#explore-agility-content .wb").hide().fadeIn() 
    }, 

    function() { 
     $("#explore-agility-content .wb").fadeOut(function() { 
      $("#explore-agility-content").html(divContent); 
     }) 
    } 

); 

Answer 2

您可以添加和刪除它可以包含幾個屬性上的鼠標來進行轉換CSS類進入和離開..

請參見下面的代碼片段（溶液1）

$('.image').mouseenter(function(){ 
 
     $(".text").addClass("animate") 
 
}); 
 
$('.image').mouseleave(function(){ 
 
      $(".text").removeClass("animate") 
 
});

.image { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    background-color: red; 
 
    
 
} 
 
.text { 
 
    background-color: white; 
 
    padding:40px; 
 
     transition:all 0.5s; 
 
} 
 

 
.left { 
 
     display:block; 
 
     height:400px; 
 
     width: 400px; 
 
     background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll; 
 
    background-color:#0C0C0C; 
 
    background-size: 100% 100%; 
 
     } 
 
.animate{ 
 
    
 
    opacity:1 !important; 
 
    padding-top:50px; 
 

 
} 
 
.noanimate{ 
 
    opacity:0; 
 
    padding-top:-50px 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image"></div> 
 
<div class="left"> 
 
      <div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare. 
 
      </div> 
 

 
</div>

解決方案2 - 使用懸停功能，而不是mounseenter離開

$('.image').hover(function(){ 
 
     $(".text").toggleClass("animate") 
 
});

.image { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    background-color: red; 
 
    
 
} 
 
.text { 
 
    background-color: white; 
 
    padding:40px; 
 
     transition:all 0.5s; 
 
} 
 

 
.left { 
 
     display:block; 
 
     height:400px; 
 
     width: 400px; 
 
     background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll; 
 
    background-color:#0C0C0C; 
 
    background-size: 100% 100%; 
 
     } 
 
.animate{ 
 
    
 
    opacity:1 !important; 
 
    padding-top:50px; 
 

 
} 
 
.noanimate{ 
 
    opacity:0; 
 
    padding-top:-50px 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image"></div> 
 
<div class="left"> 
 
      <div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare. 
 
      </div> 
 

 
</div>