jQuery悬停功能不透明动画

Question

在悬停其他元素时尝试为divs opacity 设置动画。首先我用displaynone/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 和其他来源似乎对我没有帮助。被困在这个问题上一个多小时，我决定简单地问一下。添加悬停>不透明过渡并不是那么难。

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

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 不透明度中 "a" = 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 的