Question

我希望将jquery ui像高亮效果应用于元素，但我正在使用jquery mobile。有没有内置到jquery mobile中的东西允许我这样做，而不引用任何jquery ui的东西？

由于

Answer 1

这样的事情会起作用吗？

注意：这可能会影响哈希导航，但它都是CSS

http://jsfiddle.net/MEzAU/

CSS

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

HTML

<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3</a>
<p id="1">Paragraph 1</p>
<p id="2">Paragraph 2</p>
<p id="3">Paragraph 3</p>

链接参考：

http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations

Answer 2

你也可以尝试这种黄色渐变技术解决方案：http://jsfiddle.net/xb8Km/

它是一个很好的解决方案，因为你不必使用：target，它是为可能干扰jQuery Mobile ajax hrefs的锚点href构建的;它也不需要jQuery UI中的.effect函数，它不是为jQuery mobile设计的。

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade">&nbsp;</div>
</div>

<script>
  $(document).ready(function() {
    $(".yft").click(function() {
        $(this).find(".yft_fade").show().fadeOut();
    });
  });
</script>

<style>
  .yft_fade {
    background-color:yellow;
    display:none;
  }
  .content {
    position:absolute;
    top:0px;
  }
</style>

jQuery移动高亮效果

2 个答案: