Question

I have implemented the jquery scroll text in my php web site. See my code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('.scrollingtext').bind('marquee', function() {
            var ob = $(this);
            var tw = ob.width();
            var ww = ob.parent().width();
            ob.css({ left: -tw });
            ob.animate({ left: ww }, 20000, 'linear', function() {
                ob.trigger('marquee');
            });
        }).trigger('marquee');

    });
    </script>

Within the body section

<div class="jp-title">

    <ul>
    <li class="scrollingtext" >

    <a href="index"   >welcome </span>

    </li>
    </ul>

</div>

I need to make this scroll text bas still when mouse over on the text. But I don’t know how?

Please reply

Answer 1

You have to bind a mouseenter or hover event to the scrollingtext element that stops the animation, like so:

$(".scrollingtext").bind("mouseenter", function() {
    $(this).stop();
});

I’m guessing that after the mouse leaves you want to restart scrolling. Try this:

$(".scrollingtext").bind("hover", function() {
    // equivalent to mouseenter. stop() stops all animation
    $(this).stop();
}, function() {
    // equivalent to mouseleave. this triggers your already existing 'marquee' event
    $(this).trigger("marquee");
});