Question

嘿伙计们，下面是我的代码，然后是我的CSS。它们的项目正确消失，但似乎不会淡出。

<div id="click-22" class="defer-icon">
<script>


      $("#click-22").click(function () {
        $("#22").fadeIn("slow");
      });
      $("#set-22").click(function () {
        $("#22").fadeOut("slow");
      });


</script>

    <div id="22" class="defer-pop">

        <div id="set-22" style="background-color:red">Set</div>
        <div id="cancel-22">Cancel</div>


    </div>

</div>

defer-pop类：

.defer-pop{
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    border:1px solid #CCC;
    position:relative;
    top:-80px;
    left:-90px;
    background-color:#fff;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(212,212,212)),
        color-stop(0.62, rgb(245,245,245))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(212,212,212) 0%,
        rgb(245,245,245) 62%
    );
    display:none;
    width:200px;
    height:80px;
    font-size:10px;
     box-shadow:0px 1px 0px #ababab;
    -webkit-box-shadow:0px 0px 10px #ababab;
    -moz-box-shadow:0 1px 0px #ababab;
}

任何帮助都会很棒！

由于

Answer 1

我认为这是因为set-22是click-22的孩子，click上的click-22的事件处理程序会在点击set-22时触发。要确认这一点，请在两个事件处理程序中放入日志记录或alert语句。要停止此行为，请使用event.stopImmediatePropagation()阻止所有其他事件处理程序触发，或使用event.stopPropagation()阻止父事件处理程序在子事件处理程序中触发：

$("#click-22").click(function() {
    $("#22").fadeIn("slow");
});
$("#set-22").click(function(event) {
    event.stopImmediatePropagation();
    $("#22").fadeOut("slow");
});

stopImmediatePropagation()可防止事件传播到父元素，并阻止其他事件处理程序触发。我调整了你的例子并让它在这里工作：http://jsfiddle.net/andrewwhitaker/a4ffk/

其他说明：

请勿将数字用作id s。这违反了W3 specification，可能会在某些浏览器中导致脚本出现问题。

Answer 2

<强> HTML

<div id="click-22" class="defer-icon" style="background-color:#000">

    <div id="22" class="defer-pop">

        <div id="set-22" style="background-color:red">Set</div>
        <div id="cancel-22">Cancel</div>


    </div>

</div>

<强>的Javascript

<script type="text/javascript">
$(document).ready(function(){
  $("#click-22").click(function () {
    $("#22").fadeIn("slow");
  });
  $("#set-22").click(function () {
    $("#22").fadeOut("slow");
  });
})
</script>

Css 我的帮助

.defer-pop{
    width:200px;
    height:200px
}

请记住在标签

上方添加jquery.js

和提示 -

你应该在

中编写代码

$(document).ready(function(){
    //your logic here
});

JQuery淡出问题？在Rails中

2 个答案: