Происхождение изображения в анимации jquery (высота и ширина)

Question

Происхождение изображения в анимации jquery (высота и ширина)

0

работая на другом сайте, и найти проблему, которую я не могу определить

У меня есть фотография внутри div. при нажатии я использую анимацию (ширина, высота). Проблема в том, что эффект работает в верхнем левом углу, но мне нужно, чтобы он работал с нижней середины.

Поиск в Интернете, но без везения.

Это должна быть простая задача, но я не могу понять это.

jsfiddle

Заранее спасибо Alexei

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>

#prof_window{
    height: 250px;
    margin: 0 auto 60px;
    outline: 1px solid #808080;
    overflow: hidden;
    position: relative;
    top: 85px;
    width: 1072px;
    background-color: rgba(100, 200, 11, 0.7);
}

#prof_div{
    height: 300px;
    outline: 1px solid #808080;
    position: absolute;
    top: 0;
    width: 1200px;
}

.profi{
    position: relative;
    margin-right: 60px;
    display: block;
    float: left;
    background: url(images/home_layer1.png);
    border: 8px solid;
    border-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    overflow: hidden;
    width: 130px;
    height: 130px;
    bottom: -100px;
}

</style>
</head>
<body>
<div id="prof_window">
    <div id="prof_div">
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>

<script>

$(document).ready(function(){
    $('.profi').click(function() {
        $(this).animate({width: '100px', height: '100px'});
    });
})
</script>
</body>
</html>

aleXela 27 апр. 2014, в 15:44

Источник

0

Любое другое решение ??? Пожалуйста помоги. Все еще ищу ответ.
aleXela 28 май 2014, в 22:34

Теги:

jquery

user-interface

image

animation

1 ответ

Ещё вопросы

Любое другое решение ??? Пожалуйста помоги. Все еще ищу ответ.

Devima · Answer 1 · 2014-04-27T12-46-00.000Z

Попробуйте эту скрипку

<script type="text/javascript">
$(document).ready(function(){
    $('.profi').click(function() {
        $(this).stop(true).animate({
            width: "-=40",
            height: "-=60",
            top: "+=20",
            left: "+=20"
        }, 300);
    });
})
</script>

Если это решение не соответствует вашим потребностям, я приношу свои извинения за то, что вы потеряли время.

Не, это работает, но я думаю, что ДОЛЖЕН быть лучший путь. Во всяком случае, большое спасибо! )