Jquery animate is different from the desired result please help

Community Off Topic
1

html

<div id="buttons1">
        <h2>BUTTONS1</h2>
        <div class="inner clearfix">
            <button>Albatross</button>
            <button>Bishop</button>
            <button>Canary</button>
            <button>Duck</button>
            <button>Eagle</button>
            <button>Falcon</button>
            <button>Goose</button>
            <button>Hawk</button>
            <button>Ibis<span class="bg"><span>Ibis</span></span></button>
            <button>Jaeger<span class="bg"><span>Jaeger</span></span></button>
            <button>Kingfisher<span class="bg"><span>Kingfisher</span></span></button>
            <button>Lark<span class="bg"><span>Lark</span></span></button>
        </div>
    </div>

css

#buttons1 button {
    position: relative;
}

#buttons1 button .bg {
    position: absolute;
    top: 0;
    /*left: 0; Normal result*/
    right:0;  /*right:0; --> Abnormal result*/
    width: 0;
    height: 100%;
    overflow: hidden;
}

#buttons1 button span span {
    display: block;
    width: 224px;
    height: 80px;
    line-height: 80px;
    color: #fff;
    background-color: #ae5e9b;
    border-radius: 20px;
}

jQuery

$(function(){
    $('#buttons1 button:nth-child(n+9)').on('mouseover',function(){
    $(this).find('> span').stop(true).animate({
        width:'100%'
    },300);
}).on('mouseout',function(){
    $(this).find('> span').stop(true).animate({
        width:'0%'
    },300);
});
    });

css
In this case, right: 0, the result is not displayed correctly.

2

It took some wrestling, and a blatant assumption of the desired effect to come up with this from your code. I reduced it to its simplest form for proof of concept…

<!doctype html>
<html>
  <head>
    <title>Birds Found in Literature</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div>
      <button>Albatross<span><span>Albatross</span></span></button>
      <button>Bishop<span><span>Bishop</span></span></button>
      <button>Canary<span><span>Canary</span></span></button>
      <button>Duck<span><span>Duck</span></span></button>
      <button>Eagle<span><span>Eagle</span></span></button>
      <button>Falcon<span><span>Falcon</span></span></button>
      <button>Goose<span><span>Gooose</span></span></button>
      <button>Hawk<span><span>Hawk</span></span></button>
      <button>Ibis<span><span>Ibis</span></span></button>
      <button>Jaeger<span><span>Jaeger</span></span></button>
      <button>Kingfisher<span><span>Kingfisher</span></span></button>
      <button>Lark<span><span>Lark</span></span></button>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

button {
    width: 5.5em;
    position: relative;
    cursor: pointer;
}
button span {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 100%;
    padding-top: 2px;
    color: #fff;
    background-color: #ae5e9b;
    border-radius: 20px 0 0 0;
}
button > span {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
}

$(function(){
    $('button > span').css('width','0');
    $('button').on('mouseover', function(){
        $(this).find('> span').stop(true).animate({width:'100%'}, 150);
    }).on('mouseout',function(){
        $(this).find('> span').stop(true).animate({width:'0'}, 150);
    });
});

Tested in Firefox.

I get up with the lark every day. Mind, my lark is trained to get up at 9:30.

3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.