Я пытаюсь анимировать и масштабировать изображение одновременно в jquery, но не способен анимировать изображение в точную верхнюю и левую позиции

Мне нужно изменить его верхнюю и левую позиции, но каждый раз, когда я это делаю, изображение оживляет и масштабируется в фиксированное положение, а не в заданную позицию. Поменяйте верхнюю и левую стороны js, и изображение не оживляет в другом месте до желаемой позиции. Кажется, что css или html могут быть неправильными. Пожалуйста, помогите мне.Я пытаюсь анимировать и масштабировать изображение одновременно в jquery, но не способен анимировать изображение в точную верхнюю и левую позиции

Here is the JS Fiddle

$(document).ready(function(){ 
 
\t $('#logo').animate({ 
 
    left: 500, 
 
    top: 100, 
 
    height: "50px", 
 
    width: "100px", 
 
\t 
 
}, 2000) 
 
});

body { 
 
    font-family: "Helvetica Neue", Helvetica; 
 
    width: 90%; 
 
    font-weight: 200; 
 
    letter-spacing: 1px; 
 
    margin: 25px auto 0 auto; 
 
    background: rgb(234, 235, 235); 
 
    color: rgb(25, 25, 25); 
 
} 
 

 
div, p { 
 
    margin: 0 auto; 
 
} 
 

 
p { 
 
    color: rgb(125, 125, 125); 
 
    font-size: 0.85rem; 
 
    text-align: center; 
 
    margin-bottom: 17px; 
 
} 
 

 
div { 
 
    
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<body> 
 

 
    <p> 
 
    Refresh this page to re-run the demo. 
 
</p> 
 

 
<div> 
 
    <img id="logo" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"/> 
 
    
 
    </div> 
 

 

 
</body>

источник

2015-01-17 user1538020

Вы также хотите изменить (одушевленные) размер изображения. –

да я также хочу изменить размер изображения – user1538020

Вы должны добавить position:relative к вашему стилю изображения.

img { 
    position:relative; 
}

Fiddle

Как указано here:

Направленные свойства (сверху, справа, снизу, слева) не имеют заметного влияния на элементы, если их свойство позиции стиль статична, который по умолчанию.

UPDATE

Как было отмечено в комментарии, изображение исчезает. Это связано с тем, что элемент div содержит свойство overflow:hidden. Когда изображение переполняет div, в котором оно содержится, оно становится скрытым. Вы должны прокомментировать свойство, чтобы изображение всегда было видимым.

div { 
    /*overflow: hidden;*/ 
}

Updated fiddle

источник

2015-01-17 09:47:51 Giorgio

Я применил положение относительно, но мое фактическое изображение отличается от него, то есть его огромное изображение в png. Поэтому, когда я применяю позицию относительно, а затем даю верхнюю и левую точки, изображение становится скрытым. Мне нужно оживить и масштабировать его, а не уменьшать до невидимого. Пожалуйста, предложите. – user1538020

Пожалуйста, ознакомьтесь с моим обновленным ответом и дайте мне знать, если он работает сейчас. – Giorgio

Отлично! теперь работает отлично. Большое спасибо !! – user1538020

Я пытаюсь анимировать и масштабировать изображение одновременно в jquery, но не способен анимировать изображение в точную верхнюю и левую позиции

ответ

Смежные вопросы