Animation with Javascript/jQuery

Asked

Viewed 169 times

6

I have this html:

inserir a descrição da imagem aqui

I wish that when the user dragged, the buttons would appear like this:

inserir a descrição da imagem aqui

When you drag it again, disappear ...

How could I do this with Javascript/jQuery?

Follows the code:

<div style="width: 100%; overflow-x: hidden;">
                <div class="item-total">
                    <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
                        <div class="card-panel grey lighten-5 z-depth-1">
                            <div class="row valign-wrapper">
                                <div class="col s3 lista-cartoneira" style="padding-left: 0px;">
                                    <img src="img/user-profile.jpg" alt="" class="circle responsive-img">  notice the "circle" class 
                                </div>
                                <div class="col s9 lista-cartoneira">
                                    <h1>Teste</h1>
                                    <h2>Exemplo</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                        <div class="card-panel grey lighten-5 z-depth-1">
                            <div class="row valign-wrapper">
                                <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                                    <i class="material-icons">phone</i>
                                </div>
                                <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                                    <i class="material-icons">email</i>
                                </div>
                                <div class="atalhos-cartoneira col s3" style="background-color: #757575;">
                                    <i class="material-icons">place</i>
                                </div>
                                <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                                    <i class="material-icons">open_in_new</i>
                               </div>
                          </div>
                        </div>
                   </div> 
                </div>
        </div>
javascript html jquery css

  • "drag" what?

  • @Sam when the user fingers this main div to the side, the buttons appeared.

  • Do you want me to drag or be in the Hover when the guy passes the mouse up appears and when he takes the mouse covers? What is this framework you are using?

  • Yeah, drag it. I’m using the materialize.

  • 1

    It got a little confused because first you said you want me to drag, then you said that when "dnv pass" is to close... If opened dragging would be to close dragging tb not? Until pq if the guy opens dragging and then take the mouse and come back with the mouse up the element will close again since it was open after the user took the mouse...

  • @hugocsl That, I expressed myself badly. Opens dragging and closes dragging.

  • I edited the question.

Show 2 more comments

2 answers

1

Dude I did this basic example. He wears jQuery, just like Materializa itself. But the way you set up the grid and those styles you put right in the tag made it a little difficult... So I made this model that became very responsive and you can adapt it the way you think best

inserir a descrição da imagem aqui

Follow the code I used to get the image result above:

$(document).ready(function () {
    $( ".dragx" ).draggable({ containment: "parent", axis: "x"  });
});
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #ddd;
    width: 100%;
}
.avatar {
    width: 50%;
    height: 80px;
    background-color: #999;
    position: relative;
    display: flex;
    align-items: center;
}
.objeto {
    position: absolute;
    z-index: 5;
    margin: 0 auto;
    margin-left: 50%;
    transform: translateX(-50%) !important;
}
.dragx {
    width: 50%;
    background-color: #777;
    z-index: 2;
    cursor: e-resize;
}
.icons {
    position: absolute;
    padding-left: 50%;
    width: 100%;
    height: 80px;
    display: flex;
}
.ico {
    flex: 1;
    box-sizing: border-box;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* estilos padrão do UiDrag customizados */
.ui-resizable-handle.ui-resizable-e {
    width: 10px !important;
    right: 0;
    background: #666;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <div id="containment-wrapper" class="box">
        <div class="avatar">
            <div class="objeto">sdf</div>
        </div>
        <div class="dragx"></div> <!-- barrinha do drag -->
        <div class="icons">
            <div class="ico">1</div>
            <div class="ico">2</div>
            <div class="ico">3</div>
            <div class="ico">4</div>
        </div>
    </div>

0

I made an example following your idea of dragging, not knowing which application environment, whether it is mobile or web. If it were web I would apply the effect with Hover, but there remains an implementation.

Drag mode:

$(function() {

  $('.card-panel').on('dragend', function() {
    $('.atalhos-cartoneira:eq(0)').show(200);
    $('.atalhos-cartoneira:eq(1)').show(500);
    $('.atalhos-cartoneira:eq(2)').show(800);
    $('.atalhos-cartoneira:eq(3)').show(1100);
  })
  $('.card-panel').on('mouseleave', function() {
    $('.atalhos-cartoneira:eq(0)').hide(1000);
    $('.atalhos-cartoneira:eq(1)').hide(800);
    $('.atalhos-cartoneira:eq(2)').hide(500);
    $('.atalhos-cartoneira:eq(3)').hide(200);
  })
})
img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

.icone {
  margin-top: -30px;
  height: 50px;
  cursor: pointer;
}

.atalhos-cartoneira {
  height: 120px;
  margin-top: -20px;
  display: none;
}

.material-icons {
  color: #FFF;
  transform: translate(110%, 200%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="item-total">
  <div class="col s12 m8 offset-m2 l6 offset-l3">
    <div class="card-panel grey lighten-5 z-depth-1">
      <div class="row valign-wrapper" style="height: 50px;padding-top: 20px;">
        <div class="col s3 m2 lista-cartoneira">
          <div class="col s6 m6">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrSKKu7oCCmPKDSTU6aSsZMfnUxrVImzv42-DDnAgVBmG54Szz" alt="" class="circle responsive-img">
          </div>
          <div class="col s6 m6">
            <p><b>Teste</b></p>
            <p>Exemplo</p>
          </div>
        </div>
        <div class="col s9 m10 icone">
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #00b0ff;">
            <i class="material-icons">phone</i>
          </div>
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #ffb74d;">
            <i class="material-icons">email</i>
          </div>
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #757575;">
            <i class="material-icons">place</i>
          </div>
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #00BFA5;">
            <i class="material-icons">open_in_new</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Hover mode:

$(function() {

  $('.card-panel').on('mouseenter', function() {
    $('.atalhos-cartoneira:eq(0)').show(200);
    $('.atalhos-cartoneira:eq(1)').show(500);
    $('.atalhos-cartoneira:eq(2)').show(800);
    $('.atalhos-cartoneira:eq(3)').show(1100);
  })
  $('.card-panel').on('mouseleave', function() {
    $('.atalhos-cartoneira:eq(0)').hide(1000);
    $('.atalhos-cartoneira:eq(1)').hide(800);
    $('.atalhos-cartoneira:eq(2)').hide(500);
    $('.atalhos-cartoneira:eq(3)').hide(200);
  })
})
img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

.icone {
  margin-top: -30px;
  height: 50px;
  cursor: pointer;
}

.atalhos-cartoneira {
  height: 120px;
  margin-top: -20px;
  display: none;
}

.material-icons {
  color: #FFF;
  transform: translate(110%, 200%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="item-total">
  <div class="col s12 m8 offset-m2 l6 offset-l3">
    <div class="card-panel grey lighten-5 z-depth-1">
      <div class="row valign-wrapper" style="height: 50px;padding-top: 20px;">
        <div class="col s3 m2 lista-cartoneira">
          <div class="col s6 m6">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrSKKu7oCCmPKDSTU6aSsZMfnUxrVImzv42-DDnAgVBmG54Szz" alt="" class="circle responsive-img">
          </div>
          <div class="col s6 m6">
            <p><b>Teste</b></p>
            <p>Exemplo</p>
          </div>
        </div>
        <div class="col s9 m10 icone">
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #00b0ff;">
            <i class="material-icons">phone</i>
          </div>
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #ffb74d;">
            <i class="material-icons">email</i>
          </div>
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #757575;">
            <i class="material-icons">place</i>
          </div>
          <div class="atalhos-cartoneira col s3 m3" style="background-color: #00BFA5;">
            <i class="material-icons">open_in_new</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.