Анимация ширины div и ограничение max-width с помощью jquery

Question

Анимация ширины div и ограничение max-width с помощью jquery

0

Мой контейнер div содержит два div div box1 и div box2. box2 - абсолютный div с максимальной шириной 400 пикселей;

HTML:

<div id="container">
<div class="box1"></div>
<div class="box2 animated"></div>
</div>

CSS:

#container{position:relative;width:100%;height:100%;background:red;} 

#container #box1{position:relative;width:760px;height:300px;background:blue;margin:0;} 

#container #box2{position:absolute;width:60px;max-width:350px;height:300px;background:yellow;;top:0;}

JQuery:

 $(document).ready(function(){
    var box1width = $(".box1").width();
    var windowWidth = $(window).width();
    var x = windowWidth - (box1width + 350 ) ;
    var wdt = windowWidth - (box1width) ;


    if (".box2").hasClass("animated"){
       if(x > windowWidth ){
       $(".box2").animate({width:'350px'}, 2000); 
       } else { 
       $(".box2").animate({width: wdt+ 'px'}, 2000);
       } 
    } else {

    alert("no animation for box2 nd width remain 60px");
    }

    });

Первоначально это оживляет мою box2width; теперь я хочу оживить ширину box2 при изменении размера окна, а также ограничить ширину анимации box2 до 350 пикселей;

galexy 29 март 2014, в 09:33

Источник

0

Похоже, этот код частично работает. но Uncaught SyntaxError: Unexpected token . ошибку Uncaught SyntaxError: Unexpected token . работающая скрипка позволит легко решить проблему
T J 29 март 2014, в 08:19
0

и вы не поделились animated классом ..
T J 29 март 2014, в 08:20
0

Это работает для меня, я не знаю, есть ли какая-либо ошибка при написании этого вопроса. На самом деле я могу сделать с функцией window.resize, но я не хочу запускать метод hasClass ("анимированный") в каждом случае window.resize.
galexy 29 март 2014, в 08:24
0

Код, которым вы поделились, содержит много синтаксических ошибок. Uncaught SyntaxError: Unexpected token . ошибку Uncaught SyntaxError: Unexpected token . Попробуйте скопировать точный рабочий код .. или работающая скрипка поможет решить проблему.
T J 29 март 2014, в 08:26
0

Этому анимированному классу нечего анимировать с помощью css, на самом деле это переменный класс для индикации анимации, в противном случае этот cass должен быть без анимации;
galexy 29 март 2014, в 08:26
0

Вы хотите анимировать box2 при загрузке страницы и изменять его размер, если он имеет ширину 350px и если он меньше 350px вы просто хотите показать его без анимации, я прав?
T J 29 март 2014, в 08:31
0

Я хочу анимировать box2 между 60px и 350px, только если есть место для анимации. при начальной загрузке, а также при изменении размера окна
galexy 29 март 2014, в 08:32

Показать ещё 5 комментариев

Теги:

jquery

css

jquery-animate

window-resize

1 ответ

Ещё вопросы

Похоже, этот код частично работает. но Uncaught SyntaxError: Unexpected token . ошибку Uncaught SyntaxError: Unexpected token . работающая скрипка позволит легко решить проблему
и вы не поделились animated классом ..
Это работает для меня, я не знаю, есть ли какая-либо ошибка при написании этого вопроса. На самом деле я могу сделать с функцией window.resize, но я не хочу запускать метод hasClass ("анимированный") в каждом случае window.resize.
Код, которым вы поделились, содержит много синтаксических ошибок. Uncaught SyntaxError: Unexpected token . ошибку Uncaught SyntaxError: Unexpected token . Попробуйте скопировать точный рабочий код .. или работающая скрипка поможет решить проблему.
Этому анимированному классу нечего анимировать с помощью css, на самом деле это переменный класс для индикации анимации, в противном случае этот cass должен быть без анимации;
Вы хотите анимировать box2 при загрузке страницы и изменять его размер, если он имеет ширину 350px и если он меньше 350px вы просто хотите показать его без анимации, я прав?
Я хочу анимировать box2 между 60px и 350px, только если есть место для анимации. при начальной загрузке, а также при изменении размера окна

T J · Accepted Answer · 2014-03-29T07-43-00.000Z

Проверьте этот скрипт

if (!$(".box2").hasClass("animated")) {
     if (wdt >= 60) {
         $(".box2").animate({
             width: '350px'
         }, 2000);
         $(".box2").addClass('animated');
     }
 } else {
         if (wdt <= 350) {
             $(".box2").css('width','60px');
             $(".box2").removeClass('animated');
         }
     }

side note: не уверен, что это именно то, что вы хотите, если не комментировать ниже :)

обновление в соответствии с комментариями обновленная скрипка

$(document).ready(function () {
 anime();
 var resizeTimer;
 window.onresize = function () {
     if (resizeTimer) {
         clearTimeout(resizeTimer);
     }
     resizeTimer = setTimeout(function () {
         anime();
     }, 200);
 }
})
 function anime() {
 var windowWidth = $(window).width();
 var box1width = $(".box1").width();
 var wdt = windowWidth - (box1width);
 if (wdt > 60) {
     $(".box2").stop(true,true).animate({
         width: wdt
     }, 1000);
     $(".box2").addClass('animated');
 } else if($(".box2").hasClass('animated')){
   $(".box2").css('width', '60px');
   $(".box2").removeClass('animated');
 }
}

Примечание: это просто исправление того, что вы пытаетесь сделать, я бы предпочел переход css3 по этому вопросу.

+1 за ответ! Но это не актуальный ответ для меня,
@galexy я обновил скрипку ... проверь сейчас ..
Это анимация, только если есть пространство более 350 пикселей; Я хочу анимировать box2 от 60 до 350 пикселей при изменении размера окна. эта коробка может принимать ширину 100px или 200px или 350px.
Ваш вопрос не ясен .. это не то, что вы упомянули в вопросе .. вы сказали что-нибудь о 100px , 200px т. Д. В вашем вопросе .. пожалуйста, обновите вопрос правильно .. Кстати, это то, что я придумал jsfiddle. net / tilwinjoy / Dzw9t, только если вы правильно объясните проблему, другие могут помочь вам решить ее.
Я просто говорю, что моя ширина может быть от 60 до 350 пикселей; таким образом, это может быть 100px или 200 или что-нибудь между 60px и 350px;
Итак, событие resize будет выдаваться сотни раз при изменении размера, если вы продолжаете анимацию, когда доступно более 60 пикселей ширины, анимация будет запускаться снова и снова, вызывая мерцание. Как вы хотите справиться с этим? Вы просто хотите анимировать только один раз после изменения размера?
Спасибо за помощь! Частично я добился этого, box2 width анимируется, просто нужно настроить его на изменение размера окна.
да вот что я хочу объяснить! Вместо того, чтобы запускать анимацию и проверять hasClass для каждого события изменения размера, я хочу установить тайм-аут, чтобы после изменения размера box2 анимировать с соответствующей анимацией!
@galexy угадай, что jsfiddle.net/tilwinjoy/Dzw9t решит проблему.