0

リスト項目内に div があり、表示が none に設定されています。そのリスト項目にカーソルを合わせたときにフェードインしたい。さまざまなチュートリアルを試して約1時間これに取り組んできましたが、うまくいきません...

<li data-tags="Websites" class="boxgrid captionfull">
    <img src="resources/Portfolio/Thumbs/ChugBeersWebsite.jpg" width="200" />
    <div class="boxcaption">
        <h3>Chug Beers Site</h3>
        <p><a href="http://www.chugbeers.com">Visit Site</a></p>
    </div>
</li>


<script type="text/javascript">
    $(document).ready(function() {
    $(function(){
       $('.captionfull').hover(function(){  
            $(".boxcaption").fadeIn('slow');  
        }, function() {  
            $(".boxcaption").fadeOut('slow');  
        });  
    })
});  
</script>

次のスクリプトが何らかの形で競合していると思います。フィルタリング可能なポートフォリオ プラグインを使用していますが、jquery をいじるのに十分な知識がありません。どんな助けでも大歓迎です。

$(document).ready(function(){

var items = $('#stage li'),
    itemsByTags = {};

// Looping though all the li items:

items.each(function(i){
    var elem = $(this),
        tags = elem.data('tags').split(',');

    // Adding a data-id attribute. Required by the Quicksand plugin:
    elem.attr('data-id',i);

    $.each(tags,function(key,value){

        // Removing extra whitespace:
        value = $.trim(value);

        if(!(value in itemsByTags)){
            // Create an empty array to hold this item:
            itemsByTags[value] = [];
        }

        // Each item is added to one array per tag:
        itemsByTags[value].push(elem);
    });

});

// Creating the "Everything" option in the menu:
createList('Everything',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
    createList(k,v);
});

$('#filter a').live('click',function(e){
    var link = $(this);

    link.addClass('active').siblings().removeClass('active');

    // Using the Quicksand plugin to animate the li items.
    // It uses data('list') defined by our createList function:

    $('#stage').quicksand(link.data('list').find('li'));
    e.preventDefault();
});

$('#filter a:first').click();

function createList(text,items){

    // This is a helper function that takes the
    // text of a menu button and array of li items

    // Creating an empty unordered list:
    var ul = $('<ul>',{'class':'hidden'});

    $.each(items,function(){
        // Creating a copy of each li item
        // and adding it to the list:

        $(this).clone().appendTo(ul);
    });

    ul.appendTo('#container');

    // Creating a menu item. The unordered list is added
    // as a data parameter (available via .data('list'):

    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:ul}
    }).appendTo('#filter');
}
});

#container{
display: block;
overflow: hidden;
width: 960px;
margin: 0;
padding: 0px;
}

#container li{
float: left;
height: 229px;
list-style: none outside none;
margin: 20px;
position: relative;
width: 200px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 7px;
overflow:hidden;
display:block;      
}
#container li img{
border-radius:7px;
position: absolute;  
}
#container ul{
margin: 0px;
padding: 0px;
}
#container ul.hidden{
display:none;
} 
.boxcaption{
text-align: center;
float: left;
position: absolute;
height: 100px;
width: 190px;
color: #FFF;
display: none;
bottom: 0;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding-right: 5px;
padding-left: 5px;
background-image: url(../resources/blackbg.png);
background-repeat: repeat;
}
4

3 に答える 3

3

未定義のように、jQueryドキュメントレディハンドラーを使用する必要があるかもしれません。また、すでにjQueryを使用しているので、コードを減らすためにfadeToggleメソッドを使用することもできます。

$(document).ready(function() {
  $('.captionfull').hover(function(){
    $(".boxcaption", this).fadeToggle('slow');
  });
});
于 2012-10-24T05:33:35.730 に答える
0

これを試して：

$(document).ready(function () {
    $('.captionfull').hover(function(){  
        $(this).children('.boxcaption').fadeIn('slow');  
    }, function() {  
        $(this).children('.boxcaption').fadeOut('slow');  
    }).children('.boxcaption').hide();
});
于 2012-10-24T05:30:34.050 に答える
0

これを試して：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<ul>
<li data-tags="Websites" class="boxgrid captionfull" style="border:1px solid #CCC;width:400px;">
    <img src="http://www.chugbeers.com/wp-content/uploads/2012/10/41Y82evIPSL-195x300.jpeg" width="200" />
    <div class="boxcaption" style="display:;">
        <h3>Chug Beers Site</h3>
        <p><a href="http://www.chugbeers.com">Visit Site</a></p>
    </div>
</li>
</ul>

<script type="text/javascript">
    $('.captionfull').hover(function(e){
        $(".boxcaption", this).animate({opacity:'1'},{queue:false,duration:1000});
    }, function(f) {
        $(".boxcaption", this).animate({opacity:'0'},{queue:false,duration:1000});
    });
</script>

animate を使用すると、より細かく制御できることがわかりました。ホバーごとにフェードを実行する場合は queue を true に設定し、気にしない場合は false に設定します。

于 2012-10-24T05:43:37.217 に答える