Question

我在文档加载时有这个请求：

   jQuery( window ).load(
        function(){

        $('#container img').animate({"opacity": 1});

        $('#container img').hover(function() {
            $(this).stop().animate({ "opacity": .5 });
        }, function() {
            $(this).stop().animate({ "opacity": 1 });
        });

            setTimeout(
                function(){
                    window.scrollTo( 0, 0 );
                },
                50
            );

        }
    );

当我得到正确的工作时，我将添加的if语句：

function touchMove(event) {
event.preventDefault();
if ((event.touches.length === 1) && (swipeDirection === 'down') && (swipeLength >= 90) && (swipeLength <= 120)) {
    curX = event.touches[0].pageX;
    curY = event.touches[0].pageY;
    ('1.png').hover(function() {
        $(this).stop().animate({
            "opacity": '1'

        });

这个CSS：

<style>
        #container {
            background: transparent;
            left: 5px;
            top: 20px;
            position: relative;
            border: 1px dotted #ddd;

        }
 </style>

然后在体内：

<div id="swipe-frame" class="swipe-element" ontouchstart="touchStart(event,'swipe-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);" style="width:100%; height:100%; background: transparent; -webkit-user-select: none;padding-top:128px;">
</div>

    <div id="container">
    <img src="1.png" alt="image" />
    <img src="2.png" alt="image" />
    <img src="3.png" alt="image" />
    <img src="4.png" alt="image" />
    <img src="5.png" alt="image" />
</div>

因为我试图将5张图像加载到彼此之上，使其看起来好像是一张图像。文档加载时，它们会变灰。然后，当用户在图像上滑动他们的手指时，图像被动画化为其正常状态。但没有任何事情出现。有谁知道为什么？ http://tinyurl.com/62hakh2感谢您的关注。

Answer 1

尝试从height:100% div中删除#swipe-frame，因为这会使div占据整个屏幕，而#container div就在它之后。

Answer 2

如果您尝试将图像加载到彼此之上，则需要为它们应用样式，而不仅仅是它们的容器。尝试：

 #container img {
    background: transparent;
    left: 5px;
    top: 20px;
    position: relative;
    border: 1px dotted #ddd;    
    }

jquery css div图像没有出现

2 个答案: