Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2013, 19:34
Аспирант
Отправить личное сообщение для aleksandr8i Посмотреть профиль Найти все сообщения от aleksandr8i
 
Регистрация: 16.06.2012
Сообщений: 44

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 не работает, подскажите пожалуйста, что не правильно делаю? Буду очень благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2013, 19:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,155

aleksandr8i,
полный пример с html где?
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2013, 19:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,155

Сообщение от aleksandr8i
animate({left: "500";}
уберите красное
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2013, 20:09
Аспирант
Отправить личное сообщение для aleksandr8i Посмотреть профиль Найти все сообщения от aleksandr8i
 
Регистрация: 16.06.2012
Сообщений: 44

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


<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, 10.10.2013 в 20:34.
Ответить с цитированием
  #5 (permalink)  
Старый 10.10.2013, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,155

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>

Последний раз редактировалось рони, 10.10.2013 в 20:45.
Ответить с цитированием
  #6 (permalink)  
Старый 10.10.2013, 21:00
Аспирант
Отправить личное сообщение для aleksandr8i Посмотреть профиль Найти все сообщения от aleksandr8i
 
Регистрация: 16.06.2012
Сообщений: 44

А если допустим #box_fly находиться в слайдере и нужно что бы box_fly каждый раз повторял анимацию при появление его дива родителя. Подскажите, пожалуйста какие свойства js мне помогут? Надеюсь здесь не куками нужно будет завязывать скрипт
Ответить с цитированием
  #7 (permalink)  
Старый 10.10.2013, 21:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,155

Сообщение от aleksandr8i
при появление его дива родителя
???
вот в появление и добавьте нужную анимацию
Ответить с цитированием
  #8 (permalink)  
Старый 10.10.2013, 21:24
Аспирант
Отправить личное сообщение для aleksandr8i Посмотреть профиль Найти все сообщения от aleksandr8i
 
Регистрация: 16.06.2012
Сообщений: 44

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

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

Проблема:
Слайдер показал первый фон с #box_fly-(анимация проигралась, элемент занял положение в 500px), но когда этот же #box_fly проходит второй круг, (без перезагрузки страницы), то привязанная к нему анимация не проигрывается снова, т.е у элемента положение в 500px.
Ответить с цитированием
  #9 (permalink)  
Старый 10.10.2013, 22:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,155

aleksandr8i,
сделайте пример может тогда стаанет понятнее о чём вы.
Ответить с цитированием
  #10 (permalink)  
Старый 11.10.2013, 16:11
Аспирант
Отправить личное сообщение для aleksandr8i Посмотреть профиль Найти все сообщения от aleksandr8i
 
Регистрация: 16.06.2012
Сообщений: 44

Сообщение от рони Посмотреть сообщение
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, 11.10.2013 в 16:20.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обойти удаление js в jquery IgorN jQuery 1 09.05.2012 01:32
jQuery, функция animate(), рекурсия xintrea jQuery 12 03.01.2011 12:33
JQuery и JS - динамичность элементов MCTrane jQuery 1 26.10.2010 21:41
jQuery, load: замена элемента вырубает js на странице. warobushek AJAX и COMET 0 08.10.2010 07:44
Вакансия: Front-end разработчик (HTML, CSS, JS, Ajax, jQuery) ivankov Работа 0 05.10.2010 19:00