Javascript-форум - jquery + js = animate

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - jquery + js = animate (https://javascript.ru/forum/jquery/42056-jquery-js-%3D-animate.html)

jquery + js = animate

Всем привет. Пытаюсь постичь jquery и js. Поставил себе задачу сделать следующие передвинуть див в лева на 500px с помощью библиотеки jQuery v1.8.3 и js.

Написал js

$ (document) .ready(function(){
    $("#box_fly") .ready(function(){
        $(this) .animate({left: "500";} 200);
    });
	});

JS не работает, подскажите пожалуйста, что не правильно делаю? Буду очень благодарен.

aleksandr8i,
полный пример с html где?

Цитата:

Сообщение от aleksandr8i

animate({left: "500";}

уберите красное

Вот код, красное убрал, но не заработал.

<html>
<head>
<style>
#box_fly{width:200px;height:200px;background:#000;margin:150px;position:absolute;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$ (document) .ready(function(){
    $("#box_fly") .ready(function(){
        $(this) .animate({left: "500"} 200);
    });
	});
	</script>
</head>
<body>
<div id="box_fly">BOX FLY</div>
</body>
</html>

aleksandr8i,
найдите отличия ... время анимации увеличено для наглядности

<html>
<head>
<style>
#box_fly{width:200px;height:200px;background:#000;margin:150px;position:absolute;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#box_fly").animate({left: "500"}, 2000);
    });
	</script>
</head>
<body>
<div id="box_fly">BOX FLY</div>
</body>
</html>

А если допустим #box_fly находиться в слайдере и нужно что бы box_fly каждый раз повторял анимацию при появление его дива родителя. Подскажите, пожалуйста какие свойства js мне помогут? Надеюсь здесь не куками нужно будет завязывать скрипт

Цитата:

Сообщение от aleksandr8i

при появление его дива родителя

???
вот в появление и добавьте нужную анимацию

Цитата:

Сообщение от рони (Сообщение 275810)

???
вот в появление и добавьте нужную анимацию

Пример:
Есть слайдер из трех фонов который уже работает (под работает я под розумеваю что картинки-фон автоматически перелистываются)

#box_fly как дополнительный элемент на котором весит анимация сделанная с вашей помощью.

Проблема:
Слайдер показал первый фон с #box_fly-(анимация проигралась, элемент занял положение в 500px), но когда этот же #box_fly проходит второй круг, (без перезагрузки страницы), то привязанная к нему анимация не проигрывается снова, т.е у элемента положение в 500px.

aleksandr8i,
сделайте пример может тогда стаанет понятнее о чём вы.

Цитата:

Сообщение от рони (Сообщение 275814)

aleksandr8i,
сделайте пример может тогда стаанет понятнее о чём вы.

При повторном показе слайда 01 у #box_fly анимация уже выполнена, а хочется добиться что-бы при повторном показе слайда 01, #box_fly снова двигался(анимация).

<head>
<style>


/*cycle*/
.contain-cycle{width:590px;border:1px solid red;}
.cycle{position: relative;height: 287px;padding: 0;overflow: hidden;}
.cycle ul{position: relative;z-index: 1;height: 100%;}
.cycle li{height: 100%;width: 100% !important;}
.pager{text-align: center;display: inline-block;z-index: 2;top: -31px; position: absolute; width: 100%; top:100%; margin-top:-36px;}
#next_slide, #prev_slide {background:#333;width: 30px; height:30px; position: absolute; cursor:pointer; top:50%; z-index: 3; margin-top: -20px;}
#prev_slide {left: 0; margin-left:13px;}
#next_slide {right: 0; margin-right:9px;}
/*/cycle*/

.background1{background:#666;color:#fff;text-align:center;font-size:30px;}
#box_fly{width:200px;height:200px;background:#000;margin:0px;position:absolute;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://strong-spirit-mazda.ru/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://strong-spirit-mazda.ru/js/jquery.pluginssiteimage.js"></script>
<script type="text/javascript">

if (!$.isFunction($.fancybox)) {
    var loadingTimer, loadingFrame = 1;
    body.append(loading = $('<div id="fancybox-loading"><div></div></div>'));
    _animate_loading = function() {
        if (!loading.is(':visible')) {
            clearInterval(loadingTimer);
            return;
        }

        $('div', loading).css('top', (loadingFrame * -40) + 'px');
        loadingFrame = (loadingFrame + 1) % 12;
    };
    $.fancybox = function() {
    };
    $.fancybox.showActivity = function() {
        clearInterval(loadingTimer);
        loading.show();
        loadingTimer = setInterval(_animate_loading, 66);
    };
    $.fancybox.hideActivity = function() {
        loading.hide();
    };
}
var imageCmsApiDefaults = {
    hideForm: true,
    messagePlace: 'ahead', // behind
    durationHideForm: 3000,
    cMsgPlace: 'after', //place error
    captcha: function(ci) {
        return '<div class="frame-label"><span class="title">' + captchaText + '</span>\n\
                        <span class="frame-form-field">\n\
                            <input type="text" name="captcha" value="' + captchaText + '"/> \n\
                            <span class="help-block" id="for_captcha_image">' + ci + '</span>\n\
                        </span></div>'
    },
    captchaBlock: '#captcha_block',
    cMsg: function(name, text, classN, form) {
        form.find('[for="' + name + '"]').remove();
        return '<label for="' + name + '" class="for_validations ' + classN + '">' + text + '</label>';
    }
// callback (callback accept (msg, status, form, DS)) where DS - imageCmsApiDefaults and "any other" ex. report_appereance has drop:".drop-report" if callback return true form hide 
// any other
};
var genObj = {
    msgF: '.msg',
    err: 'error', //клас
    scs: 'success', //клас
    info: 'info' //клас
}
var message = {
    success: function(text) {
        return '<div class = "msg"><div class = "' + genObj.scs + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    },
    error: function(text) {
        return '<div class = "msg"><div class = "' + genObj.err + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    },
    info: function(text) {
        return '<div class = "msg"><div class = "' + genObj.info + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    }
};
var optionsDrop = {
    overlayColor: '#000',
    overlayOpacity: '0.6',
    place: 'center', //noinherit(default) || inherit(ex. for ViewedProducts)
    effon: 'fadeIn',
    effoff: 'fadeOut',
    duration: 500,
    moreoneNC: false
};
function hideDrop(drop, form, durationHideForm) {
    var drop = $(drop);
    setTimeout(function() {
        drop.drop('closeDrop', drop);
    }, durationHideForm - 500/*time fadeout drop see on site*/)
    setTimeout(function() {
        drop.find(genObj.msgF).hide().remove();
        form.show();
    }, durationHideForm)
}
$(document).ready(function() {
    if (ltie7) {
        ieInput()
    }
    if (ltie8) {

    }
    try {
        $('.cycle ul').cycle({
            fx: 'fade',
            timeout: 3500,
            next: '#next_slide',
            prev: '#prev_slide',
            pager: '.pager',
            pagerAnchorBuilder: function(idx, slide) {
                return '<a href="#"></a>';
            }
        })
    } catch (e) {
    }
    $('.menu-main').menuCorporate({
        item: $('.menu-main').find('td'),
        duration: 300,
        drop: '.frame-item-menu > ul',
        dropWidth: 500
    })
    $('[data-drop]').drop(optionsDrop);
    $(document).on('drop.click showActivity', function(e) {
        $.fancybox.showActivity();
    })
    $(document).on('drop.show drop.hide hideActivity', function(e) {
        $.fancybox.hideActivity();
    })
})

</script>


<script type="text/javascript">
$ (document).ready(function(){
    $("#box_fly").animate({left: "200"} ,2000);
    });
	</script>
	
</head>

<body>

<div class="contain-cycle">
    <div class="cycle container_slider">
        <ul>
            <li>
            <div class="background1">Слайд 01</div>
            <div id="box_fly">BOX FLY</div>
            </li>
            <li>
               <div class="background1">Слайд 02</div>
            </li>
            <li>
               <div class="background1">Слайд 03</div>
            </li>
        </ul>
        <div class="pager p_r">

        </div>
        <div id="prev_slide"></div>
        <div id="next_slide"></div> 
    </div>
</div>

</body>

aleksandr8i,
читайте документацию по плагину ...

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<style>


/*cycle*/
.contain-cycle{width:590px;border:1px solid red;}
.cycle{position: relative;height: 287px;padding: 0;overflow: hidden;}
.cycle ul{position: relative;z-index: 1;height: 100%;}
.cycle li{height: 100%;width: 100% !important;}
.pager{text-align: center;display: inline-block;z-index: 2;top: -31px; position: absolute; width: 100%; top:100%; margin-top:-36px;}
#next_slide, #prev_slide {background:#333;width: 30px; height:30px; position: absolute; cursor:pointer; top:50%; z-index: 3; margin-top: -20px;}
#prev_slide {left: 0; margin-left:13px;}
#next_slide {right: 0; margin-right:9px;}
/*/cycle*/

.background1{background:#666;color:#fff;text-align:center;font-size:30px;}
#box_fly{width:200px;height:200px;background:#000;margin:0px;position:absolute;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://strong-spirit-mazda.ru/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://strong-spirit-mazda.ru/js/jquery.pluginssiteimage.js"></script>
<script type="text/javascript">

if (!$.isFunction($.fancybox)) {
    var loadingTimer, loadingFrame = 1;
    body.append(loading = $('<div id="fancybox-loading"><div></div></div>'));
    _animate_loading = function() {
        if (!loading.is(':visible')) {
            clearInterval(loadingTimer);
            return;
        }

        $('div', loading).css('top', (loadingFrame * -40) + 'px');
        loadingFrame = (loadingFrame + 1) % 12;
    };
    $.fancybox = function() {
    };
    $.fancybox.showActivity = function() {
        clearInterval(loadingTimer);
        loading.show();
        loadingTimer = setInterval(_animate_loading, 66);
    };
    $.fancybox.hideActivity = function() {
        loading.hide();
    };
}
var imageCmsApiDefaults = {
    hideForm: true,
    messagePlace: 'ahead', // behind
    durationHideForm: 3000,
    cMsgPlace: 'after', //place error
    captcha: function(ci) {
        return '<div class="frame-label"><span class="title">' + captchaText + '</span>\n\
                        <span class="frame-form-field">\n\
                            <input type="text" name="captcha" value="' + captchaText + '"/> \n\
                            <span class="help-block" id="for_captcha_image">' + ci + '</span>\n\
                        </span></div>'
    },
    captchaBlock: '#captcha_block',
    cMsg: function(name, text, classN, form) {
        form.find('[for="' + name + '"]').remove();
        return '<label for="' + name + '" class="for_validations ' + classN + '">' + text + '</label>';
    }
// callback (callback accept (msg, status, form, DS)) where DS - imageCmsApiDefaults and "any other" ex. report_appereance has drop:".drop-report" if callback return true form hide
// any other
};
var genObj = {
    msgF: '.msg',
    err: 'error', //клас
    scs: 'success', //клас
    info: 'info' //клас
}
var message = {
    success: function(text) {
        return '<div class = "msg"><div class = "' + genObj.scs + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    },
    error: function(text) {
        return '<div class = "msg"><div class = "' + genObj.err + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    },
    info: function(text) {
        return '<div class = "msg"><div class = "' + genObj.info + '"><span class = "icon_info"></span><div class="text-el">' + text + '</div></div></div>'
    }
};
var optionsDrop = {
    overlayColor: '#000',
    overlayOpacity: '0.6',
    place: 'center', //noinherit(default) || inherit(ex. for ViewedProducts)
    effon: 'fadeIn',
    effoff: 'fadeOut',
    duration: 500,
    moreoneNC: false
};
function hideDrop(drop, form, durationHideForm) {
    var drop = $(drop);
    setTimeout(function() {
        drop.drop('closeDrop', drop);
    }, durationHideForm - 500/*time fadeout drop see on site*/)
    setTimeout(function() {
        drop.find(genObj.msgF).hide().remove();
        form.show();
    }, durationHideForm)
}
$(document).ready(function() {
    if (ltie7) {
        ieInput()
    }
    if (ltie8) {

    }
    try {
        $('.cycle ul').cycle({
            fx: 'fade',
            timeout: 3500,
            next: '#next_slide',
            prev: '#prev_slide',
            pager: '.pager',
  *!* 
         before: function (el)
{
   if(el.id == 'box1')      $("#box_fly").css({left: "0"}).animate({left: "200"} ,2000);
} ,
*/!*
            pagerAnchorBuilder: function(idx, slide) {
                return '<a href="#"></a>';
            }
        })
    } catch (e) {
    }
    $('.menu-main').menuCorporate({
        item: $('.menu-main').find('td'),
        duration: 300,
        drop: '.frame-item-menu > ul',
        dropWidth: 500
    })
    $('[data-drop]').drop(optionsDrop);
    $(document).on('drop.click showActivity', function(e) {
        $.fancybox.showActivity();
    })
    $(document).on('drop.show drop.hide hideActivity', function(e) {
        $.fancybox.hideActivity();
    })
})

</script>


<script type="text/javascript">
$ (document).ready(function(){
    $("#box_fly").animate({left: "200"} ,2000);
    });
	</script>

</head>

<body>

<div class="contain-cycle">
    <div class="cycle container_slider">
        <ul>
            <li >
            <div class="background1">Слайд 01</div>
            <div id="box_fly">BOX FLY</div>
            </li>
            <li>
               <div class="background1">Слайд 02</div>
            </li>
        
    <li id = 'box1'>

               <div class="background1">Слайд 03</div>
            </li>

        </ul>
        <div class="pager p_r">

        </div>
        <div id="prev_slide"></div>
        <div id="next_slide"></div>
    </div>
</div>

</body>