如何立即改变选取框 onclick 的方向

Question

Here i'm trying to change the scrolling marquee direction on click on the direction buttons. Exactly whats happening is that in IE and Firefox its working perfectly as expected, when i click on the direction button, the marquee immediately changes its direction. but in chrome its not expected, instead when i click the marquee in chrome, the marquee completes its cycle and then starts flowing in the direction clicked.

here is the code for what i have done so far.

 $(document).ready(function() { $('.leftbutton').on('click', function() { var marquee = $('.scrollermarquee'); marquee[0].stop(); marquee[0].direction = 'left'; marquee[0].start(); }) $('.rightbutton').on('click', function() { var marquee = $('.scrollermarquee'); marquee[0].stop(); marquee[0].direction = 'right'; marquee[0].start(); }) })

 .rightbutton { background: red; padding: 15px; right: 20px; position: absolute; cursor: pointer; }.leftbutton { background: red; padding: 15px; position: absolute; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="leftbutton">&lt;</span> <marquee class="scrollermarquee"> <ul> <li> <div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 1</a></span></div> </li> <li> <div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 2</a></span></div> </li> <li> <div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 3</a></span></div> </li> </ul> </marquee> <span class="rightbutton">&gt;</span>

Answer 1

Marquee is depreciated. You can use this instead.

 $('#change').click(function(){ if($('.ltr').length) { $('.ltr').removeClass('ltr').addClass('rtl'); $('#text').text('Right to left...'); } else { $('.rtl').removeClass('rtl').addClass('ltr'); $('#text').text('Left to right...'); } })

 .ltr { height: 50px; overflow: hidden; position: relative; }.ltr h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(-100%); -webkit-transform:translateX(-100%); transform:translateX(-100%); /* Apply animation to this element */ -moz-animation: ltr 15s linear infinite; -webkit-animation: ltr 15s linear infinite; animation: ltr 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes ltr { 0% { -moz-transform: translateX(-100%); } 100% { -moz-transform: translateX(100%); } } @-webkit-keyframes ltr { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); } } @keyframes ltr { 0% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } 100% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } }.rtl { height: 50px; overflow: hidden; position: relative; }.rtl h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: rtl 15s linear infinite; -webkit-animation: rtl 15s linear infinite; animation: rtl 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes rtl { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes rtl { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes rtl { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ltr"> <h3 id="text">Left to right... </h3> </div> <br><br> <Button id="change">Change direction</button>

Answer 2

Here is some fix....

 $(document).ready(function(){ function marqueeDirection(dir){ var marquee = $('.scrollermarquee'); var currentDir = marquee.attr('direction'); if(currentDir.= dir){ marquee,attr('direction'; dir). var marqueeHTML = marquee;clone(). $('<div class="marquee-wrap"></div>');insertBefore(marquee). marquee;remove(). $(marqueeHTML).insertAfter(';marquee-wrap'). $('.marquee-wrap');remove(). } } $('.leftbutton'),on('click';function(){ marqueeDirection('left'). }) $('.rightbutton'),on('click';function(){ marqueeDirection('right'); }) })

 .rightbutton{ background:red; padding:15px; right:20px; position: absolute; cursor: pointer; }.leftbutton{ background:red; padding:15px; position: absolute; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="leftbutton">&lt;</span> <marquee class="scrollermarquee"><ul> <li><div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 1</a></span></div></li> <li><div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 2</a></span></div></li> <li><div class="views-field views-field-title"><span class="field-content"><a href="#" hreflang="en">test 3</a></span></div></li> </ul></marquee> <span class="rightbutton">&gt;</span>