文章/答案/技术大牛

发布

社区首页 >问答首页 >标签的Jquery选择

问标签的Jquery选择
EN

Stack Overflow用户

提问于 2014-03-02 22:25:47

回答 2查看 50关注 0票数 2

第一次提问。

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

在“左侧框”中，我有一个段落和一个span标记嵌套在其中。

当我鼠标输入一个图像(名为“push”的类)时，我希望左边框中的段落标记淡出，但让span标记可见。

这里是“左侧框”的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

感谢您的帮助和分享！

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-02 22:41:59

如果您想要将文本隐藏在一些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/

票数 0

Stack Overflow用户

发布于 2014-03-02 22:36:56

这个要简单得多，根本不需要jQuery (也不需要任何javascript)。但是，如果是映像的直接兄弟，那么它将只在<div class="leftbox">中工作。

当图像未悬停时，我假设您希望<span>再次返回fadeIn。

.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动画引擎。例如，当您在跨度变得完全不可见之前将图像解压时，它将开始褪色--从它停止褪色的同一点开始。在jQuery解决方案中，它将完成动画到opactiy: 0，然后开始淡入回退。想象一下，当你在几秒钟内反复悬停和解压图像50次时的情况。动画将因此重复自己50秒！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22134458

复制

相似问题

问标签的Jquery选择
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标签的Jquery选择EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问标签的Jquery选择
EN