Question

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

<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

Answer 1

与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

Answer 2

一般来说，这种类型的菜单将是样式无序列表（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);
});

DEMO

Answer 3

重用你的函数重写你的函数

<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>

Answer 4

使用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);
    });

});

Answer 5

我可以建议：

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-original相同的data-text，您就可以了。

Answer 6

使用数据属性的路径向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/

jquery将内容传递给$（this）.text

6 个答案: