使用 animation 更改按钮图标

Question

I am using bootstrap icons and javascript and I would like to know how can I change the icon in an animated way?

toClipboard: function (refElementName, sender) {
    let btn = $(sender);
    let btnIcon = btn.find("i")

    $("[name='" + refElementName + "']").select()
    document.execCommand("copy")
    
    btn.fadeOut(400)
    btnIcon.attr("class", "bi bi-clipboard-check")
    btn.delay(400)
    btnIcon.attr("class", "bi bi-clipboard")

}

html

<div class="col position-relative">
                                        <textarea name="textObs" rows="5" class="form-control" placeholder="Observações"></textarea>
                                        <a class="btn btn-primary" id="copy" onclick="toClipboard('textObs', this)"><i class="bi bi-clipboard"></i></a>
                                    </div>

I tried this, but it doesn't work as expected... the animation happens but in the end the button is without icon

https://jsfiddle.net/r06s5ctn/

Answer 1

Is this what you're looking for?

On click, fade out icon, then set a timeout to change the icon class once it's faded out, then fade the icon back in.

 function toClipboard(refElementName, sender) { let btn = $(sender); let btnIcon = btn.find("i") $("[name='" + refElementName + "']").select() document.execCommand("copy") btn.fadeOut(400) setTimeout(function() { btnIcon.removeClass("bi-clipboard").addClass("bi-clipboard-check") }, 400) btn.fadeIn(400) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.1/font/bootstrap-icons.min.css"> <div class="col position-relative"> <textarea name="textObs" rows="5" class="form-control" placeholder="Observações"></textarea> <a class="btn btn-primary" id="copy" onclick="toClipboard('textObs', this)"><i class="bi bi-clipboard"></i></a> </div>

Answer 2

Alloha !

To change de icon of the button, you just need to use.html from jquery like this:

btn.fadeOut(400)
btnIcon.html("<i class="bi bi-clipboard-check"></i>")
btn.delay(400)
btnIcon.attr("<i class="bi bi-clipboard"></i>")

Have a good day!