Animation with JavaScript / jQuery [closed]

Navigation
6

I have this html:

Iwouldlikethefollowingtoappearwhentheuserdrags:

Whenyoudragagain,disappear...

HowcouldIdothiswithJavaScript/jQuery?

Followthecode:

<divstyle="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>
    
asked by anonymous 14.11.2018 / 16:52

2 answers

1

Dude I made this basic example. It uses jQuery , just like Materializa itself. But the way you mounted the grid and those styles that you put directly in the tag made it difficult ... So I made this model that was even very responsive and you can adapt as you see fit

HereisthecodeIusedtogettheresultoftheimageabove:

$(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><linkrel="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><divid="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>
    
14.11.2018 / 19:26
0

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

  

Dragging 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><divclass="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><divclass="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>
    
14.11.2018 / 21:00
Daylight Saving Date Conversion Django 'bool' object has no attribute '_committed'