Question

我的问题就像我的头衔。当我点击按钮时，我想fadeOut一张图片，当我再次点击同一个按钮时，我想再次淡化图片。

$("#btn").click(function(){
    if($("#div1").display == 1){       // Your comparison was wrong, you assigned the value 1 to  $("#div1").display
        $("#div1").fadeOut(1000,"easeOutBounce",function(){         
            alert("Fade Out");
        });
    }
    else{
        $("#div1").fadeIn({
            duration: 1000,
            easing: "easeOutBounce",
            complete: function(){
                alert("Fade In");
            }
        });
    }
})

我的结果是当我完成我的fadeOut（）时，它会弹出“Fade Out”。当我再次点击按钮时，它会再次显示“淡出”。它没有运行其他部分。它没有fadeIn（）并显示“Fade In”。我怎么能实现它？

Answer 1

您的if

中有作业

 if($("#div1").display = 1){
                       ^^^

这总是会返回true。此外，我不知道这是否是检查DOM上是否有活动的正确方法，通常用

执行此操作

$(element).is(":visible");

您的代码可以简化为

您只需要fadeToggle()。那就行了

$("#btn").click(function(){

   $("#t").fadeToggle()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="t">This is a div</div>

<button id="btn">BTN</button>

Answer 2

我建议你改用fadeToggle()。

fadeToggle（[duration] [，easing] [，complete]）

＆＃13;

$("#btn").click(function(){
   $('#div1').fadeToggle("slow", "linear");
})

＆＃13;

#div1 {width: 50px; height: 50px; background-color: yellow}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1"></div>
<div id="div2"></div>

<br />

<button id="btn">Button</button>

＆＃13;

Answer 3

以下是example切换淡入淡出，正如它所说的那样可以帮助您切换淡入淡出效果

// HTML
<button > toggle</button>
<img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""
/>

// JS
$('button').click(()=>{
  $( "img" ).fadeToggle( "slow", "linear" )
})

Answer 4

要实现切换功能，您可以使用fadeToggle（）方法：https://www.w3schools.com/jquery/eff_fadetoggle.asp

Answer 5

您必须使用fadeToggle() jquery方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle("slow");
    });
});
</script>
</head>
<body>

<button>Click</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

</body>
</html>

Answer 6

为了完整起见，这里使用javascript和CSS的效果相同：

＆＃13;

var squareDiv = document.getElementsByTagName('div')[0];
var toggleFadeButton = document.getElementsByClassName('toggle-fade')[0];

function toggleFade() {
    squareDiv.classList.toggle('fade');
}

toggleFadeButton.addEventListener('click', toggleFade, false);

＆＃13;

div {
display: inline-block;
width: 100px;
height: 100px;
margin: 12px 12px 0;
background-color: rgb(255, 0, 0);
vertical-align: bottom;
opacity: 1;
transition: opacity 1.2s linear;
}

div.fade {
opacity: 0;
}

＆＃13;

<div></div>
<button type="button" class="toggle-fade">Toggle Fade</button>

＆＃13;

Answer 7

@Override
@Transactional
public void saveImageFile(Long recipeId, MultipartFile file) {

try {
    Recipe recipe = recipeRepository.findById(recipeId).get();

    Byte[] byteObjects = new Byte[file.getBytes().length];

    int i = 0;

    for (byte b : file.getBytes()){
        byteObjects[i++] = b;
    }

    recipe.setImage(byteObjects);

    recipeRepository.save(recipe);
} catch (IOException e) {
    //todo handle better
    log.error("Error occurred", e);

    e.printStackTrace();
}
}

我如何使用相同的按钮来实现fadeOut（）和fadeIn（）？

7 个答案: