Скользящая Div от левого угла к правому углу анимации

Question

Скользящая Div от левого угла к правому углу анимации

0

Я использую эту анимацию, которая почти работает нормально, т.е. я перемещаю/сдвигаю Div из левого угла в правый угол. Теперь проблема в том, что Div не доходит до края правого угла.

Скрипт здесь: http://jsfiddle.net/b6KuE/16/

Я также предоставляю свой код:

HTML:

<div class="main_container">
    <div class="container">
    </div>
</div>

CSS:

.container {
   border: black 1px solid;
   width: 10px;
   height: 10px;
   background-color: red;
}  
.main_container {
   border: black 1px solid;
   width: 100%;
   height: 12px;
}

Jquery:

$('.container').animate({
     width: 100,
     marginLeft: 300,
     marginRight: 0,
     display: 'toggle'
}, 5000);

Hassan Sardar 19 сен. 2013, в 09:51

Источник

Теги:

javascript

jquery

html

css

animation

7 ответов

3

Проверьте эту скрипку. вы должны определить marginLeft соответствии с шириной.

user2590980 19 сен. 2013, в 04:59

1

используйте этот код.

$('.container').animate({
    width: 100,
    marginLeft: $(".main_container").width()-100,
    marginRight: 0,
    display: 'toggle'
}, 5000);

naveen goyal 19 сен. 2013, в 05:52

0

кто не голосует, даже мой пост не голосует. Пожалуйста, оцените мой пост
Hassan Sardar 19 сен. 2013, в 07:58
0

@Itay Все еще нет идеального ответа, я жду лучшего решения, но не знаю, почему я получаю голоса?
Hassan Sardar 19 сен. 2013, в 08:00
1

это лучший ответ.
Jai 19 сен. 2013, в 08:03
0

Да, я думаю, что этот ответ лучше
Hassan Sardar 19 сен. 2013, в 08:05
0

@Necromancer Вы говорили, что должны были использовать «динамическую» ширину, но в этом ответе у вас могут быть проблемы с различными браузерами или устройствами, такими как ipads и т. Д.
AloneInTheDark 19 сен. 2013, в 08:14
0

@AloneInTheDark Да, я все еще жду правильного и разумного ответа, но я думаю, что я получил достаточно отрицательных голосов без причины
Hassan Sardar 19 сен. 2013, в 08:16
1

я дам вам 2 причины. 1. Вы были невежливы, пытаясь ответить на ваш вопрос. 2. Если вы продолжаете просить, чтобы госзакупки проголосовали за вас, тогда госзакупки, как правило, поступают наоборот. Не заставляйте людей повышать голос.
MarsOne 19 сен. 2013, в 08:19
0

Хорошо, мой плохой. Я позабочусь об этом в следующий раз
Hassan Sardar 19 сен. 2013, в 08:22

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

0

Попробуй это:

$('.container').animate({  
width: 100, 
right: 0, 
display: 'toggle'
 }, 5000);

Скрипт здесь: http://jsfiddle.net/b6KuE/49/

user2792091 19 сен. 2013, в 07:00

0

$('.container').animate({
        width: 100,
     marginLeft: '81.5%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

проверьте эту скрипку.

AloneInTheDark 19 сен. 2013, в 06:57

0

Я перемещаю его слева направо, свойство width не нужно менять. Вам нужно установить маржу слева и позицию в свойствах css следующим образом:

$('.container').animate({
     position: 'absolute',
        marginLeft: '100%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

Popsyjunior 19 сен. 2013, в 05:32

0

Обновленный код:

var containerWidth = $('.main_container').width();
var marginLeft = containerWidth - 100 - 2;
$('.container').animate({
    width: 100,
    marginLeft: marginLeft,
    marginRight: 0,
    display: 'toggle'
}, 5000);

Nishant Saini 19 сен. 2013, в 05:08

Ещё вопросы

кто не голосует, даже мой пост не голосует. Пожалуйста, оцените мой пост
@Itay Все еще нет идеального ответа, я жду лучшего решения, но не знаю, почему я получаю голоса?
@Necromancer Вы говорили, что должны были использовать «динамическую» ширину, но в этом ответе у вас могут быть проблемы с различными браузерами или устройствами, такими как ipads и т. Д.
@AloneInTheDark Да, я все еще жду правильного и разумного ответа, но я думаю, что я получил достаточно отрицательных голосов без причины
я дам вам 2 причины. 1. Вы были невежливы, пытаясь ответить на ваш вопрос. 2. Если вы продолжаете просить, чтобы госзакупки проголосовали за вас, тогда госзакупки, как правило, поступают наоборот. Не заставляйте людей повышать голос.
Хорошо, мой плохой. Я позабочусь об этом в следующий раз

Itay · Accepted Answer · 2013-09-19T06-36-00.000Z

4

Лучший ответ

Самое простое решение - использовать right и absolute position.

jsFiddle Demo

JS:

$('.container').animate({ right: 0 }, 5000);

CSS:

.container {
    width:100px;
    position: absolute;
    right: 100%
}
.main_container {
    position: relative;
    overflow: hidden;
}

Itay 19 сен. 2013, в 06:36

0

Понятия не имею, кто не голосует, даже мой пост не голосует. Пожалуйста, оцените мой пост
Hassan Sardar 19 сен. 2013, в 07:57
0

Этот ответ выглядит достаточно справедливым. Почему за голосование проголосовали? любая причина ? какие-либо вопросы с ответом?
Hassan Sardar 19 сен. 2013, в 08:19
0

Это, пожалуй, самый простой и гибкий ответ здесь. Ненавистники пусть ненавидят
Itay 19 сен. 2013, в 08:20
0

Ооооо я получил эту скрипку не работает на IE 10
Hassan Sardar 19 сен. 2013, в 08:24
0

@ Necromancer Это не имеет ничего общего с моим кодом. IE10 получает исключение при использовании jQuery 1.10 на jsFiddle. В любом случае обновил мою скрипку до jQuery 1.9.1 и она работает
Itay 19 сен. 2013, в 08:27
0

Да работает нормально
Hassan Sardar 19 сен. 2013, в 11:26

Показать ещё 4 комментария