Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.11.2016, 11:54
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

rotate в jQuery
Добрый день уважаемые, подскажите пожалуйста как написать правильный алгоритм для анимации вращения данного примера.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style type="text/css">

 #field {
        position: relative;
        width: 400px;
        height: 400px;
        margin-left: 10%;
        margin-top: 10%;
        /*background-color: yellow;*/
        border: 5px solid black;

}

.block {

        position: relative;
        width: 10px;
        height: 220px;
        background-color: rgba(255, 0, 0, 0.5);     
}

#first, 
#second, 
#third, 
#fourth, 
#fifth{
        position: absolute;
        top: 15%;
        left: 50%;
        transform-origin: center 320px;
}

    </style>
</head>
<body>
<div id="field">
    <div id="first" class="animate">
        <div class="block">1</div>
    </div>
    <div id="second">
        <div class="block">2</div>
    </div>
    <div id="third">
        <div class="block">3</div>
    </div>
    <div id="fourth">
        <div class="block">4</div>
    </div>
    <div id="fifth">
        <div class="block">5</div>
    </div>
</div>
<input id="button" type="button" value="Push me!">


<script type="text/javascript">
    window.onload = function () {

        console.log('VSE GOOD');

        var i,
                $field = $('#field'),
                block = $('.block'),
                allBlockes =$('#field > div'),
                len =  allBlockes.length,
                but = $('#button');
            
        but.on('click', allBlockes, function() {


                function AnimateRotate(el, d){
                        $({deg: 0}).animate({deg: d}, {
                                step: function(now, fx){
                                        el.css({
                                                transform: "rotate(" + now + "deg)"
                                        });
                                }
                        });
                }



                for (i=1; i<len; i++){



                        if (i%2 == 0){

                                var el1 = allBlockes.eq(i);

                            *!*     AnimateRotate(el1, i*(-15)); */!*
                        } else {

                                var el2 = allBlockes.eq(i);
                             *!*   AnimateRotate(el2, i*(15)); */!*
                        }

                }
        })

};
</script>
</body>
</html>

На выходе я хочу что б у меня все "парные" блоки вращались вправо на 15град. а не парные в лево на 15град. Тоесть так #first=0град #second = 15град #third = -15град #fourth = 30град #fifth=-30град.
Подскажете, пожалуйста как правильно цикл переделать ?
Ответить с цитированием
  #2 (permalink)  
Старый 06.11.2016, 12:47
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Black_Star,
Как вариант...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style type="text/css">

 #field {
        position: relative;
        width: 400px;
        height: 400px;
        margin-left: 10%;
        margin-top: 10%;
        /*background-color: yellow;*/
        border: 5px solid black;

}

.block {

        position: relative;
        width: 10px;
        height: 220px;
        background-color: rgba(255, 0, 0, 0.5);     
}

#first, 
#second, 
#third, 
#fourth, 
#fifth{
        position: absolute;
        top: 15%;
        left: 50%;
        transform-origin: center 320px;
}

    </style>
</head>
<body>
<div id="field">
    <div id="first" class="animate">
        <div class="block">1</div>
    </div>
    <div id="second">
        <div class="block">2</div>
    </div>
    <div id="third">
        <div class="block">3</div>
    </div>
    <div id="fourth">
        <div class="block">4</div>
    </div>
    <div id="fifth">
        <div class="block">5</div>
    </div>
</div>
<input id="button" type="button" value="Push me!">


<script type="text/javascript">
    window.onload = function () {

        console.log('VSE GOOD');

        var i,
                $field = $('#field'),
                block = $('.block'),
                allBlockes =$('#field > div'),
                len =  allBlockes.length,
                but = $('#button');
            
        but.on('click', allBlockes, function() {


                function AnimateRotate(el, d){
                        $({deg: 0}).animate({deg: d}, {
                                step: function(now, fx){
                                        el.css({
                                                transform: "rotate(" + now + "deg)"
                                        });
                                }
                        });
                }



                var left = -15,
					right = 15;
				
				for (i=1; i<len; i++){
                        if (i%2 == 0){

							var el1 = allBlockes.eq(i);

                            AnimateRotate(el1, left);
							left *= 2;
                        } else {

							var el2 = allBlockes.eq(i);
							
                             AnimateRotate(el2, right);
							 right *= 2;
                        }

                }
        })

};
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 06.11.2016, 14:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Black_Star
написать правильный
правильно это css, и смена класса у родителя на js
Ответить с цитированием
  #4 (permalink)  
Старый 06.11.2016, 14:53
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

destus, спасибо.
рони, да так тоже можно было. Можно дажен на чистом CSS, но это не наш стиль
Ответить с цитированием
  #5 (permalink)  
Старый 06.11.2016, 15:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style type="text/css">

 #field {
        position: relative;
        width: 400px;
        height: 400px;
        margin-left: 10%;
        margin-top: 10%;
        /*background-color: yellow;*/
        border: 5px solid black;

}

.block {

        position: relative;
        width: 10px;
        height: 220px;
        background-color: rgba(255, 0, 0, 0.5);
}

#first,
#second,
#third,
#fourth,
#fifth{
        position: absolute;
        top: 15%;
        left: 50%;
        transform-origin: center 320px;
}

    </style>
</head>
<body>
<div id="field">
    <div id="first" class="animate">
        <div class="block">1</div>
    </div>
    <div id="second">
        <div class="block">2</div>
    </div>
    <div id="third">
        <div class="block">3</div>
    </div>
    <div id="fourth">
        <div class="block">4</div>
    </div>
    <div id="fifth">
        <div class="block">5</div>
    </div>
</div>
<input id="button" type="button" value="Push me!">


<script>
window.onload = function() {
    console.log("VSE GOOD");
    var $field = $("#field"),
        block = $(".block"),
        allBlockes = $("#field > div"),
        len = allBlockes.length,
        but = $("#button");
    but.on("click", allBlockes, function() {
        function AnimateRotate(el, d) {
            $({
                deg: 0
            }).animate({
                deg: d
            }, {
                step: function(now, fx) {
                    el.css({
                        transform: "rotate(" + now + "deg)"
                    })
                }
            })
        }
        var left = i = 0;
        for (; i < len; i++) {
            var el = allBlockes.eq(i);
            if (i % 2) left += 15;
            left = -left;
            AnimateRotate(el, left)
        }
    })
};
</script>
</body>
</html>

Последний раз редактировалось рони, 06.11.2016 в 16:19.
Ответить с цитированием
  #6 (permalink)  
Старый 06.11.2016, 16:06
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Ещё раз спасибо, рони.
К сожалению совет, destus, оказался с подвохом)
Если продолжать нажимать button градусы у дивов будут продолжать умножаться =)
Ответить с цитированием
  #7 (permalink)  
Старый 06.11.2016, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Black_Star
оказался с подвохом
var i далековато, перенесите в клик.
Ответить с цитированием
  #8 (permalink)  
Старый 06.11.2016, 17:04
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Black_Star,
Да, не обратил внимание где у вас в коде i была обьявлена. Решается как сказал рони)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 15:24
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08
Помогите доработать навигацию jquery слайдера dima-f1 jQuery 0 29.02.2012 19:36