Исчезать положение изображения

У меня есть такой список:

<ul>
    <li><a href="#"><img src="/userfiles/test.png" alt="" /></a></li>
    <li><a href="#"><img src="/userfiles/test2.png" alt="" /></a></li>
</ul>

Каждое из этих изображений имеет ширину 950 пикселей и высоту 600 пикселей.

Первые 300 пикселей по высоте — это изображение без мыши, а последние 300 пикселей — это изображение с наведенным курсором, которое я хочу затемнить. Это возможно?

У меня есть этот CSS для управления тем, какое изображение показывать:

ul { list-style: none; padding: 0; margin: 0; }
ul li { width: 950px; height: 300px; overflow: hidden; position: relative; }
ul li img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

Этот код просто перемещает последние 300 пикселей изображения вверх, но вместо того, чтобы перемещать его, я хочу, чтобы непрозрачность изображения исчезала поверх «другого»:.

<script type="text/javascript">
        $(document).ready(function () {
            $("ul li img").mouseover(function () {
                $(this).stop().animate(
                    { top: "-300px" },
                    { duration: 300 })
            })
            .mouseout(function () {
                $(this).stop().animate(
                    { top: "0" },
                    { duration: 300 })
            })
        });
    </script>

image jquery mouseover fade
person janhartmann    schedule 16.09.2011    source источник
comment
Я не совсем понимаю ваш вопрос. Вы ищете функцию непрозрачности, зависящую от положения мыши?   -  person avall    schedule 16.09.2011
comment
Да, я хочу, чтобы последние 300 пикселей изображения исчезали поверх другого при наведении.   -  person janhartmann    schedule 16.09.2011
comment
Вы хотите, чтобы верхнее изображение исчезало только поверх нижнего? Что делать при наведении курсора на нижнее изображение?   -  person avall    schedule 16.09.2011
comment
Мне нужно скрыть нижнее изображение (последние 300 пикселей) поверх верхнего изображения (первые 300 пикселей), и когда я убираю мышь, оно должно исчезать поверх верхнего изображения.   -  person janhartmann    schedule 16.09.2011
comment
Я не уверен, чего вы хотите добиться, например: jsfiddle.net/v73AG/16   -  person Mario    schedule 16.09.2011
comment
Б Не совсем так. Он не должен двигаться, а должен плавно переходить два изображения.   -  person janhartmann    schedule 16.09.2011

Ответы (2)


arrow_upward
2
arrow_downward

Только что закончил реализовывать это, спасибо за представление хорошего и достаточно короткого упражнения.

Во-первых, посмотрите здесь конечный результат.

Примечания к реализации:

  1. Рассмотрите возможность изменения разметки, если это возможно. Это было бы намного проще (я бы даже сказал тривиально), если бы вы использовали изображение как background-image, а не как отдельный элемент img, и это также было бы более производительным.
  2. Решение работает путем добавления «сестры» div для каждого элемента img и соответствующего стиля. Самым важным является установка его свойства background-image, которое позволяет нам показывать только нужную половину картинки.
  3. Решение требует динамического вычисления размера исходного изображения, что я и сделал, используя решение представлено здесь.
person Jon    schedule 16.09.2011
comment
Я знаю, что положение фонового изображения было бы НАМНОГО лучше. Но мне это нужно было для особого случая. Это работает просто ИДЕАЛЬНО! Потрясающий! - person janhartmann; 16.09.2011
comment
У меня странная проблема, в этом тесте есть эффект короткого «мигания»: detnyesort. dk.web111.curanetserver.dk/work.aspx — как это возможно? - person janhartmann; 19.09.2011
comment
@meep: На самом деле понятия не имею - я посмотрю, когда найду время, но не обещаю :) - person Jon; 19.09.2011
comment
Незачем! Я пропустил какую-то таблицу стилей! Игнорировать предыдущий запрос. Ты жжешь! ;-) - person janhartmann; 21.09.2011

arrow_upward
1
arrow_downward

Думаю, у меня есть идея. Рабочий пример:

http://jsfiddle.net/avall/RMWt8/1/

В решении используется стиль overflow и игра со слоями (z-index).

Это должно быть немного улучшено из-за ошибки центральной линии, когда вы двигаетесь мышью снизу вверх, но вы должны понять идею.

person avall    schedule 16.09.2011