Question

第一次提问。

我有一个名为“leftbox”的div类。

在“leftbox”里面我有一个嵌套在其中的段落和span标记。

当我鼠标输入图像（名为“push”的类）时，我希望左框内的段落标记淡出，但保持span标签可见。

以下是“leftbox”的HTML。

<html>
<body>
<img class="push" src="images/seed1.jpg"></a>
<div class="leftbox">
<p>lorem ispum dolor sit ameti conse <span>this seed is your</span> etur ad ipisicing   elit sed loeiusim</p>
</div>
</body>
</html>

以下是我尝试执行此活动

<script>
$(document).ready(function(){
$(".push").mouseenter(function(){
$("p").fadeOut(1000);
});
});
</script

感谢您的帮助和分享！

Answer 1

这个更简单，根本不需要 jQuery （任何 javascript ）。但如果<div class="leftbox"> 立即图像的兄弟，它将仅。
我假设您希望<span>在图像 unhovered 时再次淡出。

.push + .leftbox p span {
    -webkit-transition: opacity ease-out 1s;
    -moz-transition: opacity ease-out 1s;
    -ms-transition: opacity ease-out 1s;
    -o-transition: opacity ease-out 1s;
    transition: opacity ease-out 1s;
}
.push:hover + .leftbox p span {
    opacity: 0
}

以下是示例： JsFiddle

此解决方案的巨大优势是原生CSS动画引擎。例如。当你在跨度变得完全不可见之前 unhover 图像时，它将从它停止淡出的同一点开始淡入。在 jQuery 解决方案中，它会将动画完成到opactiy: 0，然后开始淡入淡出。想象一下当您在几秒钟内重复悬停和取消图像50次时的情况。因此动画会重复50秒！

Answer 2

如果您将要隐藏的文本放在某些 span 标记内，然后将这些元素“动画”为透明，那么您应该观察到所需的效果。

<p>
  <span class="fadeable">lorem ispum dolor sit ameti conse</span>
  <span>this seed is your</span>
  <span class="fadeable">etur ad ipisicing  elit sed loeiusim<span>
</p>

$(document).ready(function () {
    $(".push").mouseenter(function () {
        $("p .fadeable").animate({
            opacity: 0
        }, 1000);
    });
});

看看这个： http://jsfiddle.net/aQtDb/

Jquery选择标签

2 个答案: