How To Change Direction Of Marquee Onclick Immediately

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

Solution 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;
}
.ltrh3 {
 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;
}
.rtlh3 {
 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%); 
 }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="ltr"><h3id="text">Left to right... </h3></div><br><br><Buttonid="change">Change direction</button>

Solution 2:

Here is some fix....

   $(document).ready(function(){
        functionmarqueeDirection(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;
    }

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