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>

これは1つのリンクでうまく機能しますが、そのうちの7つを作成し、将来このコードを再利用する必要があります。したがって、リンクIDと新しいテキストの両方を他の6つのリンクのJquery関数に渡す必要があります。最も意味があるので、できれば「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

ブライアンズの回答に基づいて作業することで、不要なときにアニメーションが繰り返されるのを防ぎ、各リンクのデータマウスアウトのリンクテキストを書き換えるのではなく、データマウスアウトを動的に追加します。

これが実際の例の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

これは、テキストが基本的に2つのテキスト間で前後に切り替わる場合に機能します。他のリンクについては、とで同じものを使用するだけでclass="coolLink"、準備は完了です。data-originaldata-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 に答える