devlifealways/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <title>JS Bin</title>
<style id="jsbin-css">
.target {
  background-color : gray;
  color: white;
  font-size : 2em;
}
</style>
</head>
<body>

  <div class="target">
    <p class="inside">
      This is just an example !
    </p>
  </div>

<script id="jsbin-javascript">
'use strict';

(function ($) {
    var out = false;
    $(window).resize(function () {
        //let target = $('.inside');
        //target.remove();
        out = true;
        $('.target').marquee({ leftToRight: true });
        out = false;
    });

    $.fn.textWidth = function () {
        var calc = '<span style="display:none">' + $(this).text() + '</span>';
        $('body').append(calc);
        var width = $('body').find('span:last').width();
        $('body').find('span:last').remove();
        return width;
    };

    $.fn.marquee = function (args) {
        var that = $(this);
        var textWidth = that.textWidth(),
            offset = that.width(),
            width = offset,
            css = {
            'text-indent': that.css('text-indent'),
            'overflow': that.css('overflow'),
            'white-space': that.css('white-space')
        },
            marqueeCss = {
            'text-indent': width,
            'overflow': 'hidden',
            'white-space': 'nowrap'
        },
            args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
            i = 0,
            stop = textWidth * -1,
            dfd = $.Deferred();

        function go() {
            if (!that.length || out) return dfd.reject();
            if (width == stop) {
                i++;
                if (i == args.count) {
                    that.css(css);
                    return dfd.resolve();
                }
                if (args.leftToRight) {
                    width = textWidth * -1;
                } else {
                    width = offset;
                }
            }
            that.css('text-indent', width + 'px');
            if (args.leftToRight) {
                width++;
            } else {
                width--;
            }
            setTimeout(go, args.speed);
        };
        if (args.leftToRight) {
            width = textWidth * -1;
            width++;
            stop = offset;
        } else {
            width--;
        }
        that.css(marqueeCss);
        go();
        return dfd.promise();
    };
})(jQuery);

$('.target').marquee({ leftToRight: true });
</script>


<script id="jsbin-source-css" type="text/css">.target {
  background-color : gray;
  color: white;
  font-size : 2em;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">    (function($) {
        let out = false;
        $(window).resize(()=>{
          //let target = $('.inside');
          //target.remove();
          out = true;
          $('.target').marquee({ leftToRight: true });
          out = false;
        });

        $.fn.textWidth = function(){
             var calc = '<span style="display:none">' + $(this).text() + '</span>';
             $('body').append(calc);
             var width = $('body').find('span:last').width();
             $('body').find('span:last').remove();
            return width;
        };

        $.fn.marquee = function(args) {
            var that = $(this);
            var textWidth = that.textWidth(),
                offset = that.width(),
                width = offset,
                css = {
                    'text-indent' : that.css('text-indent'),
                    'overflow' : that.css('overflow'),
                    'white-space' : that.css('white-space')
                },
                marqueeCss = {
                    'text-indent' : width,
                    'overflow' : 'hidden',
                    'white-space' : 'nowrap'
                },
                args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
                i = 0,
                stop = textWidth*-1,
                dfd = $.Deferred();

            function go() {
                if(!that.length || out) return dfd.reject();
                if(width == stop) {
                    i++;
                    if(i == args.count) {
                        that.css(css);
                        return dfd.resolve();
                    }
                    if(args.leftToRight) {
                        width = textWidth*-1;
                    } else {
                        width = offset;
                    }
                }
                that.css('text-indent', width + 'px');
                if(args.leftToRight) {
                    width++;
                } else {
                    width--;
                }
                setTimeout(go, args.speed);
            };
            if(args.leftToRight) {
                width = textWidth*-1;
                width++;
                stop = offset;
            } else {
                width--;
            }
            that.css(marqueeCss);
            go();
            return dfd.promise();
        };
    })(jQuery);

$('.target').marquee({ leftToRight: true });</script></body>

</html>

## jsbin.fugiyinuli.css
.target {
  background-color : gray;
  color: white;
  font-size : 2em;
}

## jsbin.fugiyinuli.js
'use strict';

(function ($) {
    var out = false;
    $(window).resize(function () {
        //let target = $('.inside');
        //target.remove();
        out = true;
        $('.target').marquee({ leftToRight: true });
        out = false;
    });

    $.fn.textWidth = function () {
        var calc = '<span style="display:none">' + $(this).text() + '</span>';
        $('body').append(calc);
        var width = $('body').find('span:last').width();
        $('body').find('span:last').remove();
        return width;
    };

    $.fn.marquee = function (args) {
        var that = $(this);
        var textWidth = that.textWidth(),
            offset = that.width(),
            width = offset,
            css = {
            'text-indent': that.css('text-indent'),
            'overflow': that.css('overflow'),
            'white-space': that.css('white-space')
        },
            marqueeCss = {
            'text-indent': width,
            'overflow': 'hidden',
            'white-space': 'nowrap'
        },
            args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
            i = 0,
            stop = textWidth * -1,
            dfd = $.Deferred();

        function go() {
            if (!that.length || out) return dfd.reject();
            if (width == stop) {
                i++;
                if (i == args.count) {
                    that.css(css);
                    return dfd.resolve();
                }
                if (args.leftToRight) {
                    width = textWidth * -1;
                } else {
                    width = offset;
                }
            }
            that.css('text-indent', width + 'px');
            if (args.leftToRight) {
                width++;
            } else {
                width--;
            }
            setTimeout(go, args.speed);
        };
        if (args.leftToRight) {
            width = textWidth * -1;
            width++;
            stop = offset;
        } else {
            width--;
        }
        that.css(marqueeCss);
        go();
        return dfd.promise();
    };
})(jQuery);

$('.target').marquee({ leftToRight: true });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<title>JS Bin</title>
	<style id="jsbin-css">
	.target {
	background-color : gray;
	color: white;
	font-size : 2em;
	}
	</style>
	</head>
	<body>

	<div class="target">
	<p class="inside">
	This is just an example !
	</p>
	</div>

	<script id="jsbin-javascript">
	'use strict';

	(function ($) {
	var out = false;
	$(window).resize(function () {
	//let target = $('.inside');
	//target.remove();
	out = true;
	$('.target').marquee({ leftToRight: true });
	out = false;
	});

	$.fn.textWidth = function () {
	var calc = '<span style="display:none">' + $(this).text() + '</span>';
	$('body').append(calc);
	var width = $('body').find('span:last').width();
	$('body').find('span:last').remove();
	return width;
	};

	$.fn.marquee = function (args) {
	var that = $(this);
	var textWidth = that.textWidth(),
	offset = that.width(),
	width = offset,
	css = {
	'text-indent': that.css('text-indent'),
	'overflow': that.css('overflow'),
	'white-space': that.css('white-space')
	},
	marqueeCss = {
	'text-indent': width,
	'overflow': 'hidden',
	'white-space': 'nowrap'
	},
	args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
	i = 0,
	stop = textWidth * -1,
	dfd = $.Deferred();

	function go() {
	if (!that.length \|\| out) return dfd.reject();
	if (width == stop) {
	i++;
	if (i == args.count) {
	that.css(css);
	return dfd.resolve();
	}
	if (args.leftToRight) {
	width = textWidth * -1;
	} else {
	width = offset;
	}
	}
	that.css('text-indent', width + 'px');
	if (args.leftToRight) {
	width++;
	} else {
	width--;
	}
	setTimeout(go, args.speed);
	};
	if (args.leftToRight) {
	width = textWidth * -1;
	width++;
	stop = offset;
	} else {
	width--;
	}
	that.css(marqueeCss);
	go();
	return dfd.promise();
	};
	})(jQuery);

	$('.target').marquee({ leftToRight: true });
	</script>


	<script id="jsbin-source-css" type="text/css">.target {
	background-color : gray;
	color: white;
	font-size : 2em;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript"> (function($) {
	let out = false;
	$(window).resize(()=>{
	//let target = $('.inside');
	//target.remove();
	out = true;
	$('.target').marquee({ leftToRight: true });
	out = false;
	});

	$.fn.textWidth = function(){
	var calc = '<span style="display:none">' + $(this).text() + '</span>';
	$('body').append(calc);
	var width = $('body').find('span:last').width();
	$('body').find('span:last').remove();
	return width;
	};

	$.fn.marquee = function(args) {
	var that = $(this);
	var textWidth = that.textWidth(),
	offset = that.width(),
	width = offset,
	css = {
	'text-indent' : that.css('text-indent'),
	'overflow' : that.css('overflow'),
	'white-space' : that.css('white-space')
	},
	marqueeCss = {
	'text-indent' : width,
	'overflow' : 'hidden',
	'white-space' : 'nowrap'
	},
	args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
	i = 0,
	stop = textWidth*-1,
	dfd = $.Deferred();

	function go() {
	if(!that.length \|\| out) return dfd.reject();
	if(width == stop) {
	i++;
	if(i == args.count) {
	that.css(css);
	return dfd.resolve();
	}
	if(args.leftToRight) {
	width = textWidth*-1;
	} else {
	width = offset;
	}
	}
	that.css('text-indent', width + 'px');
	if(args.leftToRight) {
	width++;
	} else {
	width--;
	}
	setTimeout(go, args.speed);
	};
	if(args.leftToRight) {
	width = textWidth*-1;
	width++;
	stop = offset;
	} else {
	width--;
	}
	that.css(marqueeCss);
	go();
	return dfd.promise();
	};
	})(jQuery);

	$('.target').marquee({ leftToRight: true });</script></body>

	</html>