Question

对jquery来说真的很新，所以任何帮助都会赞赏它。

尝试解决设计挑战。在悬停第三个元素时，我需要在另一个div内显示div内容。找到了一些帮助我把它组合在一起的代码，但是我想知道是否有一种方法可以在显示时为内容设置动画（slidedown，fadein等）。

任何想法如何在显示内容时将动画应用于.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

你可以添加和删除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>

Answer 2

这里有关于悬停和鼠标移动的淡入淡出效果

检查这个小提琴

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);
        })
    }

);

动画显示在另一个div中显示的div的内容

2 个答案: