0

我正在使用 JQuery 1.7.1 我想让包含复选框的 div 在按钮单击事件上闪烁。我写了以下代码：

    <script type="text/javascript">
    var nIntervId;

    function changeColor() {
        nIntervId = setInterval(flashText, 500);
    }

    function flashText() {
        var oElem = document.getElementById("divchkBox");
        oElem.style.visibility = oElem.style.visibility == "visible" ? "hidden" : "visible";
    }

    function stopTextColor() {
        clearInterval(nIntervId);
    }
    </script>
    <div id="divchkBox">
        <asp:CheckBox ID="chkBox" runat="server" Text="hi" />
    </div>
<asp:Button ID="start" Text="start" runat="server" OnClientClick="changeColor();" />

现在，我想停止这种闪烁效果，直到鼠标经过特别闪烁的复选框和/或特定的复选框单击事件。我该如何做到这一点？

是否可以在 changecolor() 或 flashText() 中发送复选框 div 的 id 而不是硬编码值？

谢谢你。

4

2 回答 2

0

据我了解您的问题，您希望 div 框在您单击按钮时开始闪烁

//declare variables
var containerDiv = jQuery('div#divchkBox'),
    chkbox = jQuery('#chkBox'),
    intervalTime = 500,
    nIntervId ;

//when user clicks on button
jQuery('#start').click(function(){
  nIntervId = setInterval(flashText,intervalTime);
});

//show/hide div
function flashText(){
  containerDiv.fadeToggle(intervalTime);
}

您可以在 fadeToggle 中以毫秒为单位指定速度。我已将其设置为与切换时间相同的间隔。这应该会产生平滑的淡入/淡出效果。

您尚未提供 的代码changecolor()，但这里是当您将鼠标悬停在复选框上时如何停止闪烁并传递复选框的 ID：

chkbox.hover(function(){
  removeInterval(nIntervId); //stop fade toggle
  containerDiv.stop().show(); //stop any fading animations and show the containing box
  changecolor($(this).attr('id')); //pass the id of this checkbox to changecolor function
  // ... or
  //changecolor($(this)); //just pass in the checkbox object so you don't have to do a dom lookup again.
});

编辑：

要使按钮以 div 为目标，您需要在按钮中传递 div 的 id：

<asp:Button ID="start" Text="start" runat="server" OnClientClick="changeColor();" data-target-div="divchkBox"/>

然后我们在 click 事件中添加一个匿名函数来将我们的 div id 传递给 flashText 函数：

//when user clicks on button
jQuery('#start').click(function(){
  nIntervId = setInterval(
      function() {
          flashText( jQuery(this).attr('data-target-div') );
      },
      intervalTime
  );
});

我们改变 flashText 函数：

//show/hide div
function flashText(id){
  jQuery('#' + id).fadeToggle(intervalTime);
}

现在我们改变点击事件的复选框：

jQuery('input[type="checkbox"]').hover(function(){
  removeInterval(nIntervId); //stop fade toggle
  $(this).parent().stop().show(); //stop any fading animations and show the containing box
});

最后，我们从脚本顶部删除两个已失效的变量：

//declard variables. We have removed containerDiv and chkbox
var intervalTime = 500,
    nIntervId ;

这种方法效率不高，因为我们在每次 fadeText 运行时都进行 dom 查找（一个元素每秒两次）。这可以重构以从元素对象中检索元素，但这回答了您的问题。

于 2013-07-05T14:06:38.023 回答
0

我认为您应该这样做：例如

简而言之，您创建了一个从提供的选择器（参数）中选择元素的方法，并使用 setInterval 和 jQuery.toggle() 方法来获得闪烁效果。此方法必须为期货闪烁暂停保留 setInterval 处理程序。

之后你应该使用 jQuery 事件机制来试验眨眼效果。

于 2013-07-05T15:30:50.110 回答