1

我正在制作一个菜单，在滚动时，链接的文本会发生变化（淡入）。我刚刚从另一个线程复制并粘贴了一段代码

<script type="text/javascript">
    function fade_new_text(){
        $('#what').animate({'opacity': 0}, 500, function () {
            $(this).text('new text');
        }).animate({'opacity': 1}, 500);
    }
    function revert(){
        $('#what').animate({'opacity': 0}, 500, function () {
            $(this).text('do something');
        }).animate({'opacity': 1}, 500);
    }
</script>

然后在正文部分我有菜单本身

<body>
    <a href="#" id="what" onmouseover="fade_new_text();" onmouseout="revert();">Do something</a>
</body>

这适用于一个链接，但我需要创建其中的 7 个，并希望将来重用此代码。因此，我需要将链接 ID 和新文本都传递给 Jquery 函数以获取其他 6 个链接，希望来自“onmouseover”和“onmouseout”，因为它最有意义？我对 Jquery 完全陌生，希望您能就如何做到这一点提出建议。

测试文件位于http://www.voxcommunications.ca/test.html

4

6 回答 6

6

与 JofryHS 的回答类似，您可以利用锚标记上的数据属性以及您可以使用 jQuery 将多个事件绑定到同一个处理程序这一事实来简化事情。

HTML

<a href="#" class="hoverlink" id="what" data-mouseover="Hovering over what" data-mouseout="Do something">Do something</a>

<a href="#" class="hoverlink" id="what1" data-mouseover="Hovering over what1" data-mouseout="Do something else">Do something else</a>

JS：

$(".hoverlink").bind("mouseover mouseout", function(e) {
    var elem = $(this);
    var text = elem.data(e.type); // e.type will have name of the current event

    elem.animate({"opacity": 0}, 500, function() {
        elem.text(text);
    }).animate({"opacity": 1}, 500);
});

JSFIDDLE

于 2012-11-30T03:19:31.083 回答
3

一般来说，这种类型的菜单将是一个样式化的无序列表 (ul) 元素，类似这样。

<ul id="menu">
    <li><a href="#" data-mouseover="Text A">Do 1</a></li>
    <li><a href="#" data-mouseover="Text B">Do 2</a></li>
    <li><a href="#" data-mouseover="Text C">Do 3</a></li>
    <li><a href="#" data-mouseover="Text D">Do 4</a></li>
</ul>

为了使标记尽可能简单，我们只对替代（鼠标悬停）文本进行编码。

第一次访问每个链接时，jQuery 会确保保留原始文本的记录。

$("#menu").on('mouseenter mouseleave', "a", function(e) {
    var $this = $(this);
    $this.stop(true).animate({'opacity': 0}, 500, function() {
        if(!$this.data('mouseout')) {
            $this.data('mouseout', $this.text());
        }
        $this.text($this.data(e.type));
    }).animate({'opacity': 1}, 500);
});

演示

于 2012-11-30T03:45:48.257 回答
1

重用你的函数像这样重写你的函数

<script type="text/javascript">
function fade_new_text(id, txt){
$('#'+id).animate({'opacity': 0}, 500, function () {
    $(this).text(txt);
}).animate({'opacity': 1}, 500);
}
function revert(id, txt){
$('#'+id).animate({'opacity': 0}, 500, function () {
    $(this).text(txt);
}).animate({'opacity': 1}, 500);
 }
</script>

然后在你的身体部分使用类似下面的东西

<body>
<a href="#" id="what" onmouseover="fade_new_text('what','Natalia');" onmouseout="revert('what','Natalia1');">Do something
</a>

<a href="#" id="what1" onmouseover="fade_new_text('what1','Natalia1');" onmouseout="revert('what1','Natalia2');">Do something
</a>

....so on...
</body>
于 2012-11-30T02:57:36.730 回答
1

根据Bryans的回答，这种方式可以防止在不必要时重复出现动画，还可以动态添加数据鼠标，而不是在每个链接的数据鼠标中重写链接文本。

这是一个工作示例FIDDLE

HTML

<a class="hoverlink" data-mouseover="Hovering here">Do something</a><br />
<a class="hoverlink" data-mouseover="Hovering again">Do something else</a><br />
<a class="hoverlink" data-mouseover="Hovering some more">Do something yet again</a><br />
<a class="hoverlink" data-mouseover="Hovering yet once more">Do something one last time</a><br />

jQuery

//Add the link text dynamically
$('.hoverlink').each(function() {
    $(this).data('mouseout', $(this).text());
});

//Perform hover function and prevent recurring animations
$("body").on("mouseover mouseout", '.hoverlink', function(event) {

    var text = $(this).data(event.type);

    $(this).stop().animate({"opacity": 0}, 500, function() {
        $(this).stop().text(text).animate({"opacity": 1}, 500);
    });

});
于 2012-11-30T03:33:41.767 回答
0

我可以建议这个：

function fade_new_text(text){
$('#what').animate({'opacity': 0}, 500, function () {
    $(this).text(text);
}).animate({'opacity': 1}, 500);
}
function revert(text){
$('#what').animate({'opacity': 0}, 500, function () {
    $(this).text(text);
}).animate({'opacity': 1}, 500);
 }

$(".coolLink").hover(
  function() {

    fade_new_text($(this).attr("data-text"));
  },
  function() {
    revert($(this).attr("data-original"));
  }
);

并对您的 HTML 进行一点点修改：

<a href="#" id="what" class="coolLink" data-original="Do something" data-text="New Text">Do something

如果文本基本上在两个文本之间来回切换，这将起作用。现在对于其他链接，只需使用相同class="coolLink"的data-originalanddata-text就可以了。

于 2012-11-30T03:09:45.360 回答
0

我会采用使用数据属性向 HTML 添加行为的方式，您可以使用以下方法：

<a href="#" data-fade-text="some text">link one</a>
<a href="#" data-fade-text="some text 2">link two</a>
<a href="#" data-fade-text="some text 3">link three</a>

-

$('[data-fade-text]').each(function(){
    var self = $(this);
    self.data('original-text', self.text());
});

$('[data-fade-text]').hover(
    function(){
        var self = $(this);
        self.animate({'opacity': 0}, 500, function () {
            self.text(self.data('fade-text'));
        }).animate({'opacity': 1}, 500);
    },
    function(){
        var self = $(this);
        self.animate({'opacity': 0}, 500, function () {
            self.text(self.data('original-text'));
        }).animate({'opacity': 1}, 500);
    }
);​

示例http://jsfiddle.net/fY5pj/

于 2012-11-30T03:23:30.253 回答