Question

在悬停其他元素时尝试为divs opacity设置动画。首先，我使用display none / block进行了尝试，但它在某个地方读到了为此无法进行转换。

这有点复杂，因为这应该适用于相同类型的每个元素，其中不同的id相同。（当图片悬停时，图片库的标题会显示在img元素的底部。）

HTML结构如下：

<article id="{PostID}">
    <div class="post-content">
        <a><img></a>
        <div class="post-content--padded">
            <p>Caption of the picture.</p>
        </div>
    </div>
</article>

首先，我使用mouseover，mouseout方法添加到post-content div，看起来像这样：

onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"

虽然有效，但没有transition。我已使用转换处理程序设置CSS以应用post-content--padded内的所有css更改，如下所示：

-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

这似乎不会影响mouseover，mouseout不透明度的变化，所以我尝试添加.animate()，但没有取得多大成功。好吧，我让post-content淡入淡出，但不是post-content--padded

不同方法

这一切都没有那么多。所以我尝试使用JQuery函数hover()。长话短说我在问题的html上面添加了这个：

<script type="text/javascript">
$(document).ready(function(){
    $('#{PostID}.post-content').hover(
    function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
    function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
    );
 });
</script>

这只是不想工作。无休止地浏览stackoverflow和其他来源似乎对我没有帮助。被困在这上面超过一个小时我决定简单地问。添加悬停＆gt;并不难。 opactiy transition。

希望我不清楚，人们在这里理解我的问题。

Answer 1

如果只需要悬停

，就可以使用css

.post-content--padded{
    opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}
.post-content:hover .post-content--padded{
    opacity: 1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}

参见演示HERE

如果你想使用Jquery

$('.post-content--padded').hide();
$('.post-content').hover(function(){
    $(this).find('.post-content--padded').fadeToggle(2000);
});

参见演示HERE

Answer 2

我还致力于将悬停与动画相结合，它的工作原理如下：

在CSS不透明度中＆＃34; a＆＃34; = 0

并在jQuery中：

$("#classy").hover(function(){
      $("#classy").animate({
          opacity:"1"
      },200);
  }, function(){
      $("#classy").animate({
          opacity:"0"
      },200);
  });

Answer 3

这是一个有效的jQuery方法：

HTML

<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>

CSS

.hide {
    opacity:0;
}

JS

$('#hover-me').hover( function() {
    if ($('#change-me').hasClass('hide')) {
        $('#change-me').removeClass('hide', 'slow');
    } else {
        $('#change-me').addClass('hide', 'slow');
    }
});

jsFiddle Demo

*这是包含jQueryUI的

JQuery悬停功能不透明动画

3 个答案: