Home/ Questions/Q 8921683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T06:36:44+00:00

I am making a menu where on rollover, the text of the link changes

  • 0

I am making a menu where on rollover, the text of the link changes (fades in). I just copied and pasted a block of code off another thread

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

then in the body section I have the menu itself

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

This works well with one link, but I need to create 7 of them and hopefully reuse this code in the future. So I need to pass both the link id and the new text to Jquery function for 6 other links, hopefully from ‘onmouseover’ and ‘onmouseout’, as it would make the most sense? I am completely new to Jquery, and would appreciate your advice on how to do that.

The test file is at http://www.voxcommunications.ca/test.html

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working off of Bryans answer, this way prevents recurring animations when unnecessary, also adds the data-mouseout dynamically instead of rewriting the Link Text in the data-mouseout on each link.

    Here is a working Example 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);
    });

});
    • 0