0

我有以下代码

html

<a href="#" class="button">button</a>

<div class="holder">

    <img src="http://placehold.it/350x150" />
    <div class="content">
        <h3>hello there</h3>    
        <a href="#">view more</a>        
    <div/>    

</div>

css

.holder {
    margin-top: 130px;
    position: relative;
}
img {    
    position: relative;
    display: block;
    transition: -webkit-transform 0.5s;
    transition: -moz-transform 0.5s;
    z-index: 10;
}
.content {
    background: blue;
    height: 100%;
    color: white;
    z-index: 1;
    position: absolute;
    top: auto;
    bottom: 0;
}
a {
    color: white;
    background: red;
    padding: 10px;
}

.holder:hover img {
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
}
.button {
    background: green;
    position: absolute;
    top: 10px;
}

jQuery

   if (Modernizr.touch) {
    alert("touch support");
}

else {
     alert("no touch support");

    $('.button').toggle(
     function(){
             $('img').css({
              '-webkit-transform' : 'translateX(90px)',
               '-moz-transform' : 'translateX(90px)'                 
             }); 
    },
    function(){
     $('img').css({
             '-webkit-transform' : 'translateX(-90px)',
             '-moz-transform' : 'translateX(-90px)'                 

            }); 
    });
}

我正在使用现代化工具来检测触摸设备。在此代码中，当用户将鼠标悬停在图像上时，它会显示.content该类，并且我正在尝试使用 jquery 为触摸设备复制它，因为悬停不适用于触摸设备。（为了检查 jquery 代码，我已经编写了可以工作的代码使用非触摸设备）

我的问题是 1）此代码是否正确，以及 2）编写 jquery 代码是为了通过单击更改图像的位置。而不是那个按钮消失了。

这就是我用纯 css 所做的——> jsfiddle-css

这就是我试图用 jquery 复制的，这是行不通的——> jsfiddle with jquery

4

2 回答 2

1

这可能是一种方式：

if (Modernizr.touch) {
    alert("touch support");
} else {
    alert("no touch ");
    var cssChanged = false; // remember wether the css has been changed
    // Note: I use true/false, but you could also use a counter, so you can make each Nth click do something
    $('.button').click(function(){
        if(cssChanged===false)
            $('img').css({
                 '-webkit-transform' : 'translateX(90px)',
                 '-moz-transform' : 'translateX(90px)'                 
             });
            cssChanged = true; // remember css has been changed
        }
        else{
          $('img').css({
                 '-webkit-transform' : "",
                 '-moz-transform' :""                
             });
            cssChanged = false; // set var back to unchanged
        }
    });
}
于 2013-06-25T10:06:27.697 回答
1

仅供参考

要解决您当前的问题，请使用jQuery Migrate 插件：

使用插件很容易；例如，只需在 jQuery 的脚本标记之后立即包含它。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>

有关更多信息，请参阅jQuery Migrate 文档。

小提琴演示

于 2013-06-25T10:41:05.910 回答