Question

我有很多div，当我有任何div时，它的内容被复制到最顶层的div，但我想突出显示最顶层的div，我怎么能用jQuery来做。

代码：

<div id="code"> </div>

<div id="1">Click Me</div>
<div id="2">Click Me, please</div>

当我点击id为1或2的div时，它的内容会被复制到具有“code”id的div，但我需要突出显示几秒钟，以便我可以通知用户某些内容已被更改。

Answer 1

试试这个.... jquery有Highlight来实现这个目标..

$(document).ready(function() {
$('div.success').effect("highlight", {}, 3000);
});

Answer 2

如果你正在使用jQuery UI，你可以这样做：

$('#code').effect('highlight',{},3000); // three seconds

另外，这两个较低元素的ID无效。您无法使用数字启动ID（除非Vivek指出，在HTML5中）。而不是1或2，请使用具有某种语义价值的内容，例如answer1或article1。

编辑：以下是使用当前HTML的方法，包括div的点击处理程序：

$('#a1,#a2').click( function(){
   $('#code')
       .html( $.trim( $(this).text() ) )
       .effect('highlight',{},1000); 
});

这里有效：http://jsfiddle.net/redler/KrhHs/

Answer 3

也有一种使用CSS和jQuery实现此目的的简单方法，请查看

CSS

@keyframes highlight {
    0% {
        background: #ffff99; 
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: highlight 2s;
}

jQuery：

function highlight(){
    $('#YourElement').addClass("highlight");
    setTimeout(function () {
          $('#YourElement').removeClass('highlight');
    }, 2000);
}

在事件中使用highlight()功能。

Answer 4

非常快速和肮脏的方式（5分钟查看文档：p）：

<script>
  $(function() {
    //when clicking on all div but not the first one
    $("div:not(:first)").click(function() {
      //Content of the selected div gets copied to the top one
      $("div:first").text($(this).text());
      //At the end of the first animation execute the second animation
      $("div:first").animate({
          opacity:"0.5"
      }, 1000, function() {
        $("div:first").animate({
            opacity:"1"
        }, 1000);
      });
    });
  });

</script>

希望有所帮助！

突出div几秒钟

4 个答案: