Форум

UserQ · #1 (**permalink**) 26.01.2015, 10:37

Есть 3 элемента на странице (ul li), необходимо при нажатии стрелки влево левый элемент анимированно уходит влево, в это же время он появляется с правой стороны, тоже анимированно. Просто ротацию элементов получилось сделать, а вот чтобы оно работало анимированно не получается.
Если жать влево приблизительно то что надо сделано, но есть проблемы которые не знаю как решить, если в право то работает как предполагалось, но нету анимированния.

<div class="wrapper">
    <a class="arrow-left left" href="#">&lt;</a>
    <div class=slider>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
            <li class="yellow"></li>
        </ul>
    </div>
    <a  class="arrow-right right"  href="#">&gt;</a>
</div>

(function($) {

    var options = {
        leftBtn: '.arrow-left',
        rightBtn: '.arrow-right',
        animationSpeed: 5,
    };

    var methods = {
        init : function(options) {
            var option = $.extend({
                leftBtn: '.arrow-left',
                rightBtn: '.arrow-right',
                animationSpeed: 5
            }, options);
            var $leftArrow = $(option.leftBtn);
            var $rightArrow = $(option.leftBtn);
            $( '.arrow-left' ).bind( 'click', methods.left );
            $( '.arrow-right').bind( 'click', methods.right );
        },
        left : function() {
            var $self = $('.arrow-left');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').first();
            $first.clone().appendTo($ul);
            $ul.find('li').animate({left: "-=100"}, 800, function() {
                //$first.remove();
            });

            //$first.remove();
        },
        right : function() {
            var $self = $('.arrow-right');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').last();
            $first.clone().prependTo($ul);
            $first.remove();
        },
        destroy : function() {
            $( '.left' ).unbind( 'click', methods.left );
            $( '.right').unbind( 'click', methods.right );
        }
    };

    $.fn.mySlider = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error(method + ' doesn\'t exist for plugin jQuery.mySlider' );
        }
    };

})( jQuery );

$('.wrapper').mySlider();

http://jsfiddle.net/GmanG/hb9m42rc/1/

Спасибо.

рони · #2 (**permalink**) 26.01.2015, 13:12

UserQ,
вариант ...

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .wrapper {
    width: 370px;
    height: 120px;
    border: 1px solid;
    position: relative;
    margin: 50px auto;
}

.wrapper ul:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.wrapper ul {
    position: relative;
    left: 0;
    padding: 0;
    width: 600px;
}

.wrapper ul li {
    float: left;
    width: 90px;
    margin-right: 10px;
    height: 90px;
    list-style-type: none;
    overflow: hidden;
}

.red {
    background-color: red;
}

.slider {
    overflow: hidden;
    /* display: inline */
    float: left;
    width: 83%;
}

.black {
    background-color: black;
}

.yellow {
    background-color: yellow;
}

.wrapper a {
    width: 20px;
    height: 20px;
    margin-top: 45px;
    text-decoration: none;
}

.left {
    margin-right: 10px;
    margin-left: 10px;
    float: left;
}

.right {
    right: 5px;
    float: right;

}

body {
    margin: 0 auto;
}
  </style>



<script>
$(window).load(function(){
(function($) {
    var options = {
        leftBtn: '.arrow-left',
        rightBtn: '.arrow-right',
        animationSpeed: 5,
    };

    var methods = {
        init : function(options) {
            var option = $.extend({
                leftBtn: '.arrow-left',
                rightBtn: '.arrow-right',
                animationSpeed: 5
            }, options);
            var $leftArrow = $(option.leftBtn);
            var $rightArrow = $(option.leftBtn);
            $( '.arrow-left' ).bind( 'click', methods.left );
            $( '.arrow-right').bind( 'click', methods.right );
        },
        left : function(event) {
            event.preventDefault();
            var $self = $('.arrow-left');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').first();
            $first.clone().appendTo($ul);
            $first.animate({width: 0, 'margin-left' : '-10px'}, 800, function() {
                $first.remove();
            });
        },
        right : function(event) {
            event.preventDefault();
            var $self = $('.arrow-right');
            var $parent = $self.closest('.wrapper');
            var $ul = $parent.find('ul');
            var $first = $ul.find('li').last();
            var clone = $first.clone().prependTo($ul);
            $first.animate({width: 0}, 800, function() {
                $first.remove();
            });
            clone.css({width: 0}).animate({width: '90px'}, 800)
        },
        destroy : function() {
            $( '.arrow-left' ).unbind( 'click', methods.left );
            $( '.arrow-right').unbind( 'click', methods.right );
        }
    };

    $.fn.mySlider = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error(method + ' doesn\'t exist for plugin jQuery.mySlider' );
        }
    };

})( jQuery );
$('.wrapper').mySlider();
});
</script>


</head>
<body>
  <div class="wrapper">
    <a class="arrow-left left" href="#">&lt;</a>
    <div class=slider>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
            <li class="yellow"></li>
        </ul>
    </div>
    <a  class="arrow-right right"  href="#">&gt;</a>
</div>

</body>


</html>

UserQ · #3 (**permalink**) 26.01.2015, 13:42

Да хороший вариант, я тоже его уже попробовал.

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript